将叠加div设置为整页的高度，而不仅仅是屏幕视口的100％

Question

我正在创建一个单页式网站，因此每个部分都设置为100％高度。

问题是，我在某些方面使用叠加层，我希望叠加层覆盖整个网站的高度。不仅仅是100％的视口高度，还有整个场地的高度。

下面是一个基本的小提琴：

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

还有一些来自小提琴的备份代码：

<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的高度设置为文档的高度。

我还更新了你的小提琴，以便你可以看到它的实际效果。