Question

我有一个使用以下CSS样式设置的div类：

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

问题是，当里面的文字没有强制DIV达到200px的最大高度时，垂直滚动条仍然显示出来。我可以点击向上和向下箭头，但它只会将内容上下移动大约一两个像素。

这是在谷歌Chrome（版本18.0）和Iceweasel 11中发生的。

Answer 1

事实证明，另一种CSS风格导致了这个问题：

body{
    line-height: 1;
}

任何有兴趣了解这会导致问题的原因和原因的人都可以阅读有关行高属性的here

Answer 2

我遇到过这个问题。但我解决了这个使用以下css样式：

div.yourcontainer{overflow-y:auto;}

如果容器高于最大高度，则垂直滚动条将显示。

Answer 3

我遇到了这个问题，我发现在子元素上使用position: relative导致了问题。显然这不是每个人的解决方案，尤其是在使用position: absolute的情况下，但对我来说它有效。

Answer 4

只是为了证明 @Kuba Orlik 的解决方案（他作为对已接受答案的评论发布）这是唯一对我有用的解决方案。

在内部元素上添加：

line-height: normal;

注意：明确normal不是1，因为它是不同的

Answer 5

我今天早些时候遇到过这个错误。在我的例子中，显示了一个子元素列表：inline-block而不是display：block。切换到显示：截断div中我的子元素列表的块为我修复了问题。

Answer 6

就我而言，问题出在字体上。我们使用 font-family: Galano Grotesque。显然，此字体呈现得高于计算出的高度。

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

所以即使没有max-height，当内部p和外部div都计算为20px高度时，仍然有一个滚动条（overflow: auto }}) 因为字体比预期的高1px。

所以解决方案可以是以下任何一种：

Answer 7

我使用Bootstrap和nav也遇到了这个问题。这是因为bootstrap将nav-tabs中的li定义为：.nav-tabs > li { margin-bottom:-1px; }。要抵消这种情况，您还必须：

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

无需设置last-child，以下示例将始终显示滚动，无论列表中有多少内容：

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

Answer 8

当我尝试在div中包含react组件的列表（flex列）时遇到了这个问题，我通过将每个列表项中的元素边距更改为0来解决它。

对我进行故障排除的方法是检查列表项（可能是OP中的每个<li>）并查看哪些样式使div认为每个列表项都比人眼可见的更大。

以下是检查项目中列表项内图标上的流氓边距的示例：

解决方法是将该图标的样式设置为垂直边距为0，但在我的应用程序中，我只是将所有边距设为0并添加了一些填充权限。