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>

如果我将高度硬编码为100px，并且项目数超过此高度，则会出现滚动条。但是，如果我将高度设置为100％，则不会出现滚动条。有人可以让我知道我哪里出错吗？

您可以在http://jsfiddle.net/xf7kjcf6/

上查看示例代码

Answer 1

当你使用任何元素的height: 100%;时，你需要问一个100％的问题？默认情况下，用户代理会将height: auto;分配给某些元素，并且由于父元素height为auto，因此100%可以正常工作，但100%的{{1}}父级（默认情况下设置为auto）而不是视口。

为了使其成为视口的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，所以您可能也需要这样做。

Answer 2

没有JS，你可以这样做：

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body,
html {
  height: 100%;
}

＆＃13;

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

＆＃13;

Answer 3

您需要向body / html标记添加100％高度的父级，以使div成为窗口的100％。所以添加：

body, html {
 height: 100%;
}

然后你可以根据需要将div改为100％高度。

Answer 4

如果你想使用100％的div，那么你必须使用body和html 100％。通常高度自动那些不是100％。

html,body{
height:100%;

}

滚动条显示div标签内的无序列表

4 个答案: