Question

我相信你以前都见过类似的问题，但我读过的内容都没有解决这个问题。

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

由于40px 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;
}

Answer 2

ul {
  list-style: none;
  background: red;
  height: 100%;
  overflow: auto;
}

从“自动”变为“隐藏”

Answer 3

您可以将高度设置为AUTO或指定最小高度和最大高度。

<强>实施例

ul{
 /*
 It's one or the others
 */
    height:auto;
    min-height: 400px;
    max-height: 600px;
}

使用min和max，介于（400和600）之间的值将根据内容的大小来设置。

overflow: auto;可能也是您的问题，您可以将其设置为overflow: hidden;

Answer 4

这就是为我解决的问题：

    body {
    height: auto;
    overflow:hidden;
}

div {
    height: 100%;
    width: 300px;
}

ul {
    overflow: scroll;
    height: 100%;
}

因此，添加高度：auto和overflow：隐藏到正文应该摆脱页面的滚动条。

Answer 5

解决方案1：使用calc（）函数

如果您支持现代浏览器，则可以使用calc功能：

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

对于ul元素，将高度设置为100% - 40px，这将计算在剩余空间中适合ul的确切高度。

请参阅演示：http://jsfiddle.net/audetwebdesign/KNShL/

解决方案2：使用绝对定位

您还可以使用绝对定位将ul精确地拟合到父块中。

html, body {
    height: 100%;
}
body, h1, ul {
    margin: 0;
    padding: 0;
}
div.wrapper {
    height: 100%;
    width: 300px;
    position: relative;
}
h1 {
    height: 40px;
    line-height: 40px;
}
ul {
    list-style: none;
    background: red;
    overflow: auto;
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 0;
    width: 100%;
}

在这种情况下，请在position: relative父块上设置div.wrapper，然后在子position: absolute元素上使用ul，并将偏移量设置为top: 40px ，bottom: 0和right: 0，宽度为100％。

绝对定位方法应该适用于支持CSS2的任何旧版浏览器。

请参阅演示：http://jsfiddle.net/audetwebdesign/929sW/

Answer 6

始终使用关键字“auto”，％中的数字将始终在html中出现错误或模糊屏幕，即每当屏幕被更改时，它都无法正确回答。如果你使用的是％，那么永远不要给它的父级赋予“填充”和“边距”。总是使用屏幕。

高度100％会导致不需要的滚动条

6 个答案:

解决方案1：使用calc（）函数

解决方案2：使用绝对定位