Question

我出现了意外（对我而言）垂直滚动条显示的行为。我不明白容器高度的限制是什么。

我可以通过更改LI的边距：1或设置来消除此问题 UL的lineheight：正常而不是1.

任何人都可以解释实际发生的事情吗？也就是说我超过了哪个高度需要垂直滚动条？

我创建了一个非常简单的JSFIDDLE来说明我遇到的问题。

HTML code：

<div class="content-section" >
  <ul >
    <li>cheese</li>
    <li>crackers</li>
  </ul>
</div>

CSS代码：

body {
 line-height: 1;
}

ul {
    margin: 0;
}

.content-section {
        overflow-y: auto; 
}

Answer 1

这是因为您的line-height设置为1，这意味着行高与font-size相同。这会导致字体略微溢出该行。您需要将line-height设置为大于文本高度的值，您可能已经猜到了。该文本在技术上应该表现得如此。盒子的高度由线条的高度定义，但文字比线条略大。从可读性的角度来看，您的行高不应该等于您的字体大小。我希望这有帮助。我知道它并没有准确地告诉你高度的来源，但我相信你已经成功地探索了多种对抗方法。

Answer 2

我不确定为什么你需要将溢出设置为auto，如果你删除它然后问题解决了

如果内容部分需要一定高度，则设置高度，如果需要，则会出现滚动条（如果需要溢出）

http://jsfiddle.net/pGuHG/2/

.content-section {
    overflow-y: auto;
    height: 100px;
}

Answer 3

我也有这个问题。我有一个场景，需要设置max-height，并且需要跨越高度时滚动，因此我需要设置overflow:auto，但是当不跨越高度时，也会显示滚动。

我将行高调整为更大，并且滚动消失了。

当不期望它们行高和溢出问题时显示滚动条

3 个答案: