Give overlay div a height of the full page, not just 100% the screen viewport

Question

i am making a one page style website so each section is set to 100% height.

The issue is, i am using an overlay at some points and i want the overlay to be over the whole height of the website. Not just the 100% viewport height but over the whole site height.

Heres a basic fiddle showing:

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

And some back up code from the 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

Try using:

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

it sets the height of your div to the height of the document.

I also updated your fiddle so you can see it in action.