如果页面滚动，使 html 和 body 拉伸到 100% 高度和更多答案

【问题标题】：Making html and body stretch to 100% height and more if the page scrolls如果页面滚动，使 html 和 body 拉伸到 100% 高度和更多
【发布时间】：2012-12-18 13:38:09
【问题描述】：

我想让我的<html> 和<body> 标签成为视口的整个高度（如果页面不够高而无法滚动），或者网页的整个高度（如果可以）。

目前我正在使用这个 CSS：

html, body {
    height: 100%;
}

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

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

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

【问题讨论】：

我猜您这样做是因为您想要一个始终位于页面底部的页脚？如果是这样，只需google "sticky footer"。
不，我只有一个侧边栏和内容 div，它应该是页面高度的 100%，但是由于我必须添加 height: 100% 以使其成为用户视口的整个高度，当用户滚动时它也会中断。

标签： html css

【解决方案1】：

听起来你的目标是让身体

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

如果是这种情况，下面的 sn-p 应该会有所帮助

/* 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%;
}

【讨论】：

这是要走的路。可以找到一个很好的参考here

【解决方案2】：

你试过了吗：

min-height: 100vh;

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

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

【讨论】：

【解决方案3】：

起点：

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

【讨论】：

不起作用，html 和 body 标签仍然只有用户视口的高度。
请参阅我对嵌套 div 的说明，或者澄清您要做什么，因为不清楚。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

html
{
  height: 100%;
}
body
{
  max-height: 100%;
}

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

【讨论】：

【解决方案6】：

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

div {
    overflow:scroll;
}

【讨论】：