将 <body> 设置为 100% window 高度以包括固定 div

Question

Please see http://jsfiddle.net/muc0mzgt/.

正文基本上在页脚 div 之前结束，因为后者的位置是固定的。这里的问题是我想添加一个页面填充背景图像，它现在将在红线所在的位置结束，因为它附加到正文。

将 body 高度设置为 100vh 让我已经很接近了，但您仍然可以稍微滚动一下，这样您就可以看到没有背景图像的页面部分。

有什么想法吗？

非常感谢！

Answer 1

使用 reset.css，然后将 body & html 元素设为 100% 高度

* { /* quick reset */
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  border: 1px solid red;
}
#footer {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1030;
}

<body>
  <p>Some Paragraph</p>
  <div id="footer">This is some footer text</div>
</body>

将 <body> 设置为 100% window 高度以包括固定 div

Set <body> to 100% window height to include fixed div

html

css

background-image