如何让 BODY 元素占据 HTML 元素的 100% 高度？答案

【问题标题】：How can I make the BODY element take up 100% height of the HTML element?如何让 BODY 元素占据 HTML 元素的 100% 高度？
【发布时间】：2015-03-05 18:51:46
【问题描述】：

我正在使用 twitter 引导程序“粘性页脚”示例代码。
粘性页脚工作正常，但现在我想通过使主体（或 div）占据html 元素的高度来“填充”剩余空间，然后应用背景颜色。

HTML

<body>
<p>....</p>      
  <footer class="footer">
    <div class="container">
      <p>Place sticky footer content here.</p>
    </div>
  </footer>
</body>

CSS

html {
  position: relative;
 min-height: 100%;
  background-color: green;
   /* background-color: transparent; */
    border: 3px solid blue;

 } 

body {
background-color: tomato;
  padding-top: 20px;
  border: 3px solid black;
  min-height: 100%;
}


.footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 60px;
  background-color: #0bb;
}

这是一个有效的演示 - http://jsbin.com/xurulofame/1/edit?html,css,output

如何使 BODY 元素占据 HTML 元素的 100% 高度 - 从而用“番茄”颜色填充背景？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

使用这个：

body {height:100vh;}

以及为您的 body 元素添加其余属性

【讨论】：

很好，谢谢，这与@YourFriend 的回答有类似的问题，即如果您将<body> 锁定到视口大小，由于页面填充了更多内容，正文不会“气球” -这反过来又需要“膨胀”<html> 元素，因此将页脚推到底部。但是，如果我在 <body> 中的 div 上使用您的规则，它会得到正确的结果，谢谢！
我喜欢 vh 属性，不知道它存在。
@Veld 确实是一个非常有用的属性

【解决方案2】：

在 HTML 中使用 height:100% 而不是使用最小高度。这是结果http://jsfiddle.net/z9h18xge/

【讨论】：

谢谢，但是如果 HTML 元素没有 min-height: 100%，当没有足够的内容填满屏幕时，它不会占据整个视口高度。
我不太明白你在说什么。不是垂直覆盖整个屏幕吗？你打开我上面提供的链接了吗？
必须有一些其他的 HTML 元素，你在 bootstrap 上使用。也许他们没有让它在引导程序上工作，而在这里工作正常。如果您对身高有任何疑问，请阅读此讨论。 stackoverflow.com/questions/11963813/…
如果你看一下你制作的 jsfiddle，看看页脚是如何位于页面中间的？如果 HTML 元素使用height: 100%，它会占用视口的大小，如果视口不足以容纳内容，页脚将呈现在视口的底部，即主要内容的一部分。
你想让它看起来像这样吗？ geekfellows.com/issue.jpg我删除了里面的html设置。

【解决方案3】：

请检查此代码。或链接到 fiddle

html{height:100%;}
body{
    margin:0;
    height:100%;
}
#wrapper{
    width:100%;
    height:100%;
    display:table;
    margin:0 auto;
}
#footer{
    width:100%;
    overflow:hidden; /*for FF on Windows 7*/
    display:table-footer-group;
    height:1%;
    background: #ccc;
    height: 100px;
}

<div id="wrapper"> <!-- table -->
    <div class="w1">
        <p>header and content of the page</p>
    </div>
    <div id="footer"> <!-- table-footer-group -->
            <p>footer content</p>
    </div>
</div>

【讨论】：