CSS 最大高度和溢出自动始终显示垂直滚动

Question

我有一个使用以下 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 中出现这种情况。

Answer 1

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

body{
    line-height: 1;
}

任何有兴趣了解这如何以及为何会导致问题的人，都可以在此处

阅读行高属性

Answer 2

我遇到了这个问题，我发现子元素上有

position: relative

导致了问题。显然这并不是适合所有人的解决方案，特别是在使用

position: absolute

的情况下，但对我来说它有效。

Answer 3

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

将其添加到内部元素上：

line-height: normal;

注意：明确地

normal

不是

1

，因为它是不同的

Answer 4

我将这个

padding-bottom: 1px

添加到

overflow: auto

div，它似乎对我来说是固定的..

Answer 5

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

div.yourcontainer{overflow-y:auto;}

如果容器高于 max-height，则会显示垂直滚动条。

Answer 6

垂直滚动的原因很明显：滚动的内容高于滚动区域。但当你观察他们的身高时，他们是相等的！

原因有多种，但都归结为一个共同点：滚动内容内部的某个元素溢出，导致结果更高。

如何解决这个问题？

1. 通过查看滚动元素的底部边缘附近（如果水平滚动，则查看右侧）来找到有罪元素，因为它们最有可能溢出。您应该观察到比他们父母的身高更大。

2. 看看是什么让它们溢出，比它们的容器大。正如其他答案所建议的，它可以是

   line-height

   ，一些

   margin

   等。更改这些属性以使它们适合，或者作为替代方案，将

   overflow-y: hidden

   设置为其直接父级。

Answer 7

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

对我来说解决此问题的方法是检查列表项（可能是OP中的每个

<li>

）并查看哪些样式使div认为每个列表项比人眼可见的大。

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

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

Answer 8

我在使用 Bootstrap 和 nav 时也遇到了这个问题。 发生这种情况是因为 bootstrap 将导航选项卡中的 li 定义为：

.nav-tabs > li { margin-bottom:-1px; }

。 为了解决这个问题，您还必须这样做：

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

---

如果不设置最后一个子项，以下示例将始终显示滚动，无论列表中有多少内容：

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

Answer 9

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

Answer 10

就我而言，问题出在字体上。我们使用

font-family: Galano Grotesque

。显然，该字体的渲染高度高于计算的高度。

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

所以即使没有

max-height

，当内部

p

和外部

div

都计算为

20px

高度时，仍然有一个滚动条（带有

overflow: auto

），因为字体大约高

1px

超出预期。

因此解决方案可以是以下任意一种：

• 使用不同的字体。
• 将

  padding

  添加到外部

  div

  。这样它就足够大以覆盖来自字体的额外像素。就我而言，在底部添加一个像素的填充，在顶部添加一个像素解决了问题。
• 将

  line-height

  设置为稍大一点的值（在我的例子中，从

  1.25

  到

  1.4

  ），这样就不会干扰字体。
• 将

  line-height

  设置为

  normal

  ，因为这样实际值会受到字体的影响。然而，根据 Mozilla，这不是首选方式。

Answer 11

在我的例子中，我又得到了一个带有 pos 绝对内部元素和溢出自动的元素。和道具底部：-1px；造成了这个问题。解决了底部：0；

Answer 12

我在 jquery UI 自动完成方面遇到了这个问题：

修复方法是从 ui-menu-item-wrapper 中删除

padding

：

.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

.ui-menu-item {
    padding: 0;
}

.ui-menu-item-wrapper {
    padding: 0 !important;
}