html - Making a div that covers the entire page

Question

I would like to make a div that covers the entire page. I put a css style with height:100% but this covers only the viewable area. I want it to also cover the area when I scroll down.

Answer 1

Use position:fixed this way your div will remain over the whole viewable area continuously ..

give your div a class overlay and create the following rule in your CSS

.overlay{
    opacity:0.8;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}

Demo: http://www.jsfiddle.net/TtL7R/1/