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

html, body { height: 100%; }
#page { min-height: 100% }

Answer 2

I'm not sure what you're doing with this div, but you can style the element as well.

Answer 3

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/

Answer 4

 <style type="text/css">
 html, body {
    margin:0;
    padding:0;
    height:100%; 
 } 
 #test { 
    position:absolute; 
    display:block;
    background:#ccc; 
    height:100%; 
    width:100%;
 }
 </style>

Answer 5

Here is a great article on how to do just that...

http://james.padolsey.com/javascript/get-document-height-cross-browser/