How to fill 100% of an absolutely positioned div? (IE7+) [duplicate]

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.

Answer 2

You need to give the child position: absolute and set left, right, top, bottom to 0.

See it in action.

Answer 3

You'll likely have to set a hard-coded width for the parent DIV to get IE7 to behave nicely. the centering can be done with the "margin-left: auto;" "margin-right: auto;" css.