woody993 woody993 - 11 months ago 72
CSS Question

Absolute DIV height 100%

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.

alt text

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;
}

Answer Source

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.