html - 高度 100% 会导致不需要的滚动条

Question

我相信你们之前都见过类似的问题，但我读过的任何内容都无法解决这个问题。

基本上我有一个高度为 100% 的 div，它填充了视口(viewport)。在这个 div 中，我有一个高度为 40px 的 h1 标签和一个高度为 100% 的无序列表来填充页面的剩余高度。

由于 40 像素的 H1 标签，页面出现了我不想要的垂直滚动条。

类似问题的另一个答案是将 overflow:hidden 添加到 div。这工作了一段时间，但我发现并解决了这个问题。当我得到 X 数量的列表项时，我的无序列表需要滚动条，由于 div 上的 overflow: hidden，我看不到最底部的几项。请参阅下面的链接以获取演示: (Here)。

如果有人能帮我解决这个问题，我将不胜感激。

HTML:

<div>
  <h1>Header</h1>
  <ul>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>

CSS:

html {
  height: 100%;
}
body,
h1,
ul {
  margin: 0;
  padding: 0;
}
body {
  height: 100%;
}
div {
  height: 100%;
  width: 300px;
  overflow:hidden;
}
h1 {
  height: 40px;
  line-height: 40px;
}
ul {
  list-style: none;
  background: red;
  height: 100%;
  overflow: auto;
}

Answer 1

只需要一个更改 - 只需将 body 设置为 height:auto 或忽略它，因为这是默认值

body {
  height: auto;
}