垂直滾動條會導致水平滾動條

Question

我的CSS是這樣的：

div.SOMECLASS { 
    position: absolute; 
    max-height: 300px 
    height: auto; 
    width: auto; 
    overflow: auto; 
    ... 
} 

DIV的高度和寬度比例自動創建。雖然高度固定爲最大，但只要達到此值，就會出現垂直滾動條。這工作都很漂亮。

現在的問題：
如果垂直滾動條出現，他們使用了周圍的水平空間 10px的，因爲滾動條將被放置內的div。
然而，寬度是不自動定標的，以允許由所述垂直滾動條用完這些額外的10多歲的像素。作爲添加垂直滾動條之前的水平寬度只是完全正確的內容（如從width:auto設定期望的），則現在div也顯示水平滾動條 - 以允許丟失的10個像素。這很愚蠢。

• 我該如何避免讓這些水平滾動條自動縮放以使垂直滾動條適合的寬度div？

如果可能，我正在尋找一種不依賴於完全禁用水平滾動的解決方案，因爲這可能在某些時候（即對於某些輸入）需要。

Answer 1

我發現這是工作，但離完美遠的解決方案：

我添加了一個padding-right : 15px我的div自動增長整個股利。現在，如果出現垂直滾動條，它們就會填充到填充內，因此水平寬度仍然可以。

遺憾的是，當不需要垂直滾動時，填充當然也會出現，這使得我的div只比它的寬度稍微寬一些：：/在我眼中，這仍然比不需要的水平滾動條。

Answer 2

只是想出了一個漂亮的差強人意的解決方案（至少我的版本這個問題）。

我承擔與width: auto的問題是，它的行爲類似於width: 100vw;問題是，當垂直滾動條出現時，視窗寬度保持不變（儘管〜10px滾動條），但可視區域（我稱之爲）減少了10px。

通過個它定義在這個「可視區域」的條款顯然定義的寬度，因此改變你的代碼：

div.SOMECLASS { 
    position: absolute; 
    max-height: 300px 
    height: auto; 
    width: 100%; 
    overflow: auto; 
    ... 
} 

應該允許內容正確重新調整！

p.s.您也可以改爲添加overflow-x: hidden，這將停止顯示水平滾動條，而只需在垂直滾動條出現時從div的右側減去〜10px。