13

如果页面不够高而不能保证滚动，我想让我的<html>和<body>标签成为视口的整个高度，或者如果它是网页的整个高度。

目前我正在使用这个 CSS：

html, body {
    height: 100%;
}

如果网页的高度不足以让用户滚动，这很有效，但是在长网页上，它只会达到用户浏览器视口的高度。我也试过：

html, body {
    min-height: 100%;
}

但这似乎与根本没有height声明具有相同的效果。

4

6 回答 6

14

听起来你的目标是让身体

  • 始终覆盖屏幕（内容最少或没有内容）
  • 能够伸展（如果有大量内容）

如果是这种情况，以下代码段应该会有所帮助

/* this looks like it should work

       html, body{
         min-height: 100%;
       }

    but this ↓ does the trick */

html, body{
  padding: 0;
  margin: 0;
}
html{
  height: 100%;
}
body{
  min-height: 100%;
}
于 2015-09-03T20:10:44.467 回答
7

你有没有尝试过：

min-height: 100vh;

这应该将元素的高度设置为视口，如果超出，它将有一个滚动条，这是一个示例：

http://codepen.io/r3plica/pen/jBaPYB

于 2017-03-16T15:28:39.853 回答
1

一个起点：

body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

（或者如果您对某些浏览器有问题，请添加一个带有 ID 的容器 div 等。）

编辑：在下面添加完整的代码示例：

<body>
    <aside>Sidebar</aside>
    <div id="main">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</body>

CSS：

* {
  font-size: 2em
}

aside {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    background-color: pink;
}

#main {
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    overflow: auto;
    background-color: red;
}
于 2013-01-04T05:41:53.963 回答
1 
html, body {
 height: 100%;
}
div {
 min-height: 100%;
}

如果页面滚动，这是使 html 和 body 拉伸到 100% 高度的解决方案

于 2017-05-03T09:54:58.070 回答
0 
html
{
  height: 100%;
}
body
{
  max-height: 100%;
}

在 body 元素中使用 max-height 会将内容包装在页面的可视大小内，并删除滚动或额外的空白。

于 2016-02-03T13:36:29.773 回答
-1

您需要指定overflow特定 div 的属性。即使页面滚动或内容更多，它也会确保显示您的内容。

div {
    overflow:scroll;
}
于 2013-01-04T05:43:28.840 回答