我用下面的CSS樣式設置了一個div類:

div.multiple_choice{
    border: 1px solid black; 
    max-width: 300px; 
    max-height: 200px; 
    overflow: auto;
}

問題是，當里面的文本沒有強制DIV達到200px的最大高度時，垂直滾動條仍然會顯示出來。我可以點擊上下箭頭，但它只能將內容上下移動一兩個像素。

這種情況正在谷歌Chrome(18.0版)和Iceweasel 11中發生。

事實證明，另一種CSS樣式導致了這個問題:

body{
    line-height: 1;
}

任何有興趣了解這如何以及為什么會引起問題的人，可以在這里閱讀行高屬性

我對此有一個問題，我發現子元素上的position: relative導致了這個問題。顯然，這不可能是所有人的解決方案，尤其是在使用position: absolute的情況下，但對我來說，它是有效的。

只是為了證明@Kuba Orlik的解決方案(他在接受的答案上發表了評論)是唯一一個對我有效的。

在內部元素上添加此內容:

line-height: normal;

注意:顯式normal不是1，因為它是不同的

我遇到過這個問題。但是我用下面的css樣式解決了這個問題:

div.yourcontainer{overflow-y:auto;}

如果容器高于max-height，將顯示垂直滾動條。

我在試圖將react組件的列表(flex列)包裝在div中時遇到了這個問題，我通過將每個列表項中的元素邊距改為0來解決這個問題。

對我來說，解決這個問題的方法是檢查列表項(可能每個& lt李& gt看看是什么樣式讓div認為每個列表項都比肉眼可見的要大。

下面是一個在我的項目中檢查列表項圖標上的錯誤邊距的例子:

解決方案是將圖標的樣式設置為垂直邊距為0，盡管在我的應用程序中，我只是將所有的邊距都設置為0，并添加了一些右填充。

我在使用Bootstrap和nav時也遇到了這個問題。這是因為bootstrap將nav-tabs中的li定義為:。導航標簽& gtLi { margin-bottom:-1px；}.為了解決這個問題，您還必須:

.nav-tabs > li:last-child {
   margin-bottom:0;
}

如果不設置last-child，下面的示例將始終顯示scroll，無論列表中有多少內容:

<ul class="navs nav-tabs nav-stacked" style="max-height:80px;overflow:auto;">
  <li></li>
  ...
</ul>

今天早些時候我發現了這個bug。在我的例子中，一個子元素列表有display: inline-block而不是display: block。切換到display: bl ock顯示截斷的div中的子元素列表為我修復了這個問題。

對我來說，問題出在字體上。我們使用字體系列:Galano Grotesque。顯然，這種字體呈現高于計算的高度。

<div>
    <p>some text</p>
</div>

因此，即使沒有max-height，當內部p和外部div都被計算為20px高度時，仍然有滾動條(帶有overflow: auto ),因為字體比預期高了大約1px。

因此，解決方案可以是以下任何一種:

使用不同的字體。 向外部div添加填充。這樣，它將足夠大，以涵蓋來自字體的額外像素。在我的例子中，在底部和頂部分別添加一個像素的填充就解決了這個問題。 將line-height設置為稍大的值(在我的例子中，從1.25到1.4)，這樣它就不會干擾字體。 將行高設置為正常，因為實際值會受到字體的影響。然而，根據Mozilla的說法，這并不是首選方式。 垂直滾動的原因很明顯:滾動的內容高于滾動區域。但是當你觀察它們的高度時，它們是相等的！

原因是多方面的，但都歸結為一個:滾動內容中的一個元素溢出了它，使結果更高。

如何解決這個問題？

通過查看滾動元素的底部邊緣附近(或者如果水平滾動，則查看右側)，找到有問題的元素，因為它們最有可能溢出。你應該觀察到比他們父母更高的身高。

看看是什么讓它們溢出，比它們的容器大。正如其他答案建議的那樣，它可以是行高、一些邊距等。更改這些屬性以使它們適合，或者，將overflow-y: hidden設置為它們的直接父級。

我將這個padding-bottom: 1px添加到overflow: auto div中，它似乎已經為我修復了..