Question

Possible Duplicate:
CSS height 100% in IE7

I’d like to have a centered block on a webpage that’s filled to 100% by a child div.

Here is my HTML code:

<div id="parent">
    <div id="child"></div>
</div>

Here is my CSS:

#parent {
   position: absolute;
   background-color: blue;
   top: 2em;
   left: 4em;
   bottom: 3em;
   right: 2em;  
}

#child {
   position: relative;
   background-color: red;
   height: 100%;   
}

And here is a JSfiddle:
http://jsfiddle.net/XMS2G/1/

The problem is that in Internet Explorer 7, the browser does not cause the child div to expand to the entire parent div. How would I accomplish this without using Javascript?

Answer 1

Consider using position:absolute for child as well. And then just use top:0px; bottom:0px; right:0px; left:0px;

I think it will work.