17

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

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

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

这发生在 Google Chrome（18.0 版）和 Iceweasel 11 中。

4

8 回答 8

13

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

body{
    line-height: 1;
}

任何有兴趣了解这会如​​何以及为什么会导致问题的人都可以在此处阅读有关 line-height 属性的信息

于 2012-04-20T18:47:22.260 回答
6

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

div.yourcontainer{overflow-y:auto;}

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

于 2013-05-07T02:41:18.477 回答
5

我遇到了这个问题，我发现position: relative子元素导致了问题。显然这不是每个人的解决方案，特别是如果position: absolute正在使用，但对我来说它有效。

于 2015-07-28T13:59:02.597 回答
3

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

在内部元素上添加：

line-height: normal;

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

于 2021-03-02T13:42:25.240 回答
2

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

为我解决此问题的方法是检查列表项（可能<li>是 OP 中的每个项），看看是什么样式使 div 认为每个列表项都比人眼可见的要大。

下面是一个在我的项目的列表项中检查图标上的恶意边距的示例： 流氓保证金示例

解决方案是将该图标的样式设置为具有 0 的垂直边距，尽管在我的应用程序中我只是将所有边距设为 0 并添加了一些 padding-right。

固定流氓保证金示例

于 2017-07-05T00:46:35.777 回答
1

我在使用 Bootstrap 和导航时也遇到了这个问题。发生这种情况是因为引导程序将导航选项卡中的 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>
于 2013-07-02T21:52:42.183 回答
1

我今天早些时候遇到了这个错误。在我的情况下，子元素列表具有 display: inline-block 而不是 display: block。Switching to display: block for my list of child elements in the truncated div 为我解决了这个问题。

于 2015-01-20T22:34:03.960 回答
1

就我而言，问题出在字体上。我们使用font-family: Galano Grotesque. 显然，这个字体被渲染得高于计算的高度。

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

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

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

  • 使用不同的字体。
  • 添加padding到外部div. 这样它就足够大，可以覆盖来自字体的额外像素。就我而言，在底部添加一个像素，在顶部添加一个像素可以解决问题。
  • 设置line-height为更大的值（在我的情况下，从1.25to 1.4），所以它不会干扰字体。
  • 设置line-height为，normal因为这样实际值将受字体影响。但是，根据 Mozilla的说法，这不是首选方式。
于 2021-01-27T10:27:33.020 回答