html - div标签内无序列表的滚动条

Question

我在 div 标签内有一个无序列表，如果列表中的元素数超过网页的长度，我希望该列表可以滚动。

<div style="width: 300px; height:100px; overflow: auto">
    <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    </ul>
</div>

如果我将高度硬编码为 100 像素，并且元素数超过此高度，则会出现滚动条。但是，如果我将高度设置为 100%，则不会出现滚动条。谁能告诉我哪里出错了？

您可以在 http://jsfiddle.net/xf7kjcf6/ 查看示例代码

Answer 1

当您使用 height: 100%; 时任何元素，你需要问一个问题，即 100% 的是什么？默认情况下，用户代理分配 height: auto;到某些元素并且由于父元素height是auto你的100%确实有效，但它是 100%父级(默认设置为 auto)而不是视口(viewport)。

为了使其成为视口(viewport)的 100%，您需要设置 height: 100%; div 的所有父元素在这种情况下它本身应该是

html, body {
   height: 100%;
}

.a_list {
    width: 300px;
    height: 100%;
    list-style-type: disc;
}

.a_list li {
    padding-left: 20px;
}

避免为您的 <div> 编写内联样式元素，将它们移动到外部样式表，然后使用 height: 100%;它现在应该可以工作了。此外，您不需要 overflow: auto;属性，因为默认情况下它将有一个滚动条。

Demo

请注意，如果您将任何其他包装元素添加到您的 div那么你需要设置 height该包装元素到 100%

最后但同样重要的是，您可能不知道 CSS Reset ，因此您可能也需要它。