html - 为 overlay div 提供整个页面的高度，而不仅仅是屏幕视口(viewport)的 100%

Question

我正在制作一个单页样式的网站，因此每个部分都设置为 100% 高度。

问题是，我在某些点使用了叠加层，我希望叠加层覆盖网站的整个高度。不仅仅是 100% 视口(viewport)高度，而是整个站点的高度。

这是一个基本的 fiddle 表演:

http://jsfiddle.net/5KFVx/1/

还有一些来自 fiddle 的备份代码:

<div id="overlay"></div>
<div id="onepagediv"></div>
<div id="onepagediv"></div>
<div id="onepagediv"></div>

body, html {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}

#onepagediv {
height: 100%;
width: 100%;
background-color: #f00;
}

#overlay {
background-color: #000;
position: absolute;
height: 100%;
width: 100%;
opacity: 0.6;
}

Answer 1

尝试使用:

$('#overlay').height($(document).height());

它将 div 的高度设置为文档的高度。

我还更新了你的 fiddle ，这样你就可以看到它的实际效果。