0

我敢肯定，你们之前都看过类似的问题，但我读过的内容都没有解决这个问题。

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

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

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

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

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;
}
4

6 回答 6

0

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

body {
  height: auto;
}
于 2013-09-25T10:40:27.410 回答
0 
ul {
  list-style: none;
  background: red;
  height: 100%;
  overflow: auto;
}

使其从“自动”变为“隐藏”

于 2013-09-25T10:43:09.970 回答
0

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

例子：

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

使用 min 和 max，（400 到 600）之间的值将由有多少内容来设置。

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

于 2013-09-25T10:44:04.820 回答
0

这就是为我解决的问题：

    body {
    height: auto;
    overflow:hidden;
}

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

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

因此，添加 height: auto 和 overflow:hidden 到 body 应该摆脱页面的滚动条。

于 2013-09-25T10:49:03.173 回答
0

解决方案 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/

于 2013-09-25T10:59:02.393 回答
0

始终使用关键字“auto”，% 中的数字在 html 中总是会出错或模糊屏幕，即无论何时更改屏幕都不会正确答案。另外，如果您使用 % ，则永远不要将“填充”和“边距”acc 赋予其父级。始终使用屏幕。

于 2013-09-25T11:44:07.023 回答