Absolute DIV height 100%

absolute, css, height, html

Solution

Well it looks to me that your element with all the content is floated. If it is then its not going to expand the body unless it is cleared.

Problem

I have been working on this for the past couple of hours, and searching the web and stackoverflow hasn't been much support. How do I make `#gradient` and `#holes` fill the entire page? I have used the Inspect Element feature in Safari, and when I highlight the body element it does not fill the entire window. HTML: ``` <body> <div id="gradient"></div> <div id="holes"></div> <div id="header">Header Text</div> </body> ``` CSS: ``` html, body { height:100%; margin:0; padding:0; } body { background-image:url(../Images/Tile.png); background-color:#7D7D7D; background-repeat:repeat; } #gradient { background-image:url(../Images/Background.png); background-repeat:repeat-x; position:absolute; top:0px; left:0px; height:100%; right:0px; } #holes { background-image:url(../Images/Holes.png); background-repeat:repeat; position:absolute; top:2px; left:2px; height:100%; right:0px; } #header { background-image:url(../Images/Header.png); background-repeat:repeat-x; position:absolute; top:0px; left:0px; width:100%; padding-top:24px; height:49px; /* 73 - padding */ color:rgb(113, 120, 128); font-family:Helvetica, Arial; font-weight:bold; font-size:24px; text-align:center; text-shadow:#FFF 0px 1px 0px; } ```

Original source