No replies
Jeremy
Offline
newbie
Last seen: 15 years 1 week ago
Joined: 2004-12-04
Posts: 2
Points: 0

Hello!

I am having a problem of a div not taking 100% of its parent's height, even though I am giving it height:100%. Can someone please help me? This is in Firefox and Opera. I know it doesn't work yet in IE, but I will get to that when I get this to work in the other browsers!

Here is the problem, simplified, I can't figure out why #content is NOT taking up 100% of the height, but instead only the height of what is inside it:

CSS:

html, body
{
height:100%;
margin: 0px;
padding: 0px;
}

#layout
{
margin: auto;
width: 760px;
min-height: 100%;
color:#000000;
background-color: #FFFFFF;
background-image: url(border.gif);
background-repeat: repeat-y;
}

#content
{
background-image:url(flame.gif);
background-position: bottom right;
background-repeat:no-repeat;
width: 100%;
height: 100%;
}

HTML:

<div id="layout">
<div id="content">
Lorem ipsum dolor sit amet...
</div>
</div>

Thanks!!