Absolute positioned child div expands to fit the parent?

Question

Is there anyway for an absolute positioned child to expand to fill its relative positioned parent? (The height of parent is not fixed) Here is what i did and it is working fine with Firefox and IE7 but not IE6. :(

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

#parent { position: relative; width: 200px; height:100%; background:red }
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue }

Answer 1

If I remember correctly there is a bug with how IE6 handles div height. It will only create the div to the height needed to contain the content within it when height is set to 100%. I would recommend two approaches:

1. Don't worry about supporting IE6 as it is a dead browser anyway
2. If that doesn't work, use something like jQuery to get the height of the parent div and then set the child div to that height.
3. fake it by setting the backgrounds to be the same colour so no-one notices the difference

Answer 2

You can achieve this with setting both the top and bottom attributes of the child.

See how this is done

At the bottom of that article, there is a link to Dean Edwards' IE7 (and IE8) js library that you should include for IE6 visitors. It is a JS library that actually MAKES IE6 behave like IE7 (or 8) when you include it. Sweet!

Dean Edwars' IE7 and 8 JS libraries

Answer 3

As far as I know, there is no way of expanding a parent element around an absolutely positioned child element. By making the child element absolutely positioned your are removing it from the regular flow of page items.

I recently built a 2-column website where the right column was absolutely positioned but the left column was not. If the left column had less content and a smaller height than the right column, the page would cut off the right column since it was absolutely positioned.

In order to resolve this, I had to determine if the height of the right column was greater than the height of the left column and if so set the height of the parent div height to the greater of the two.

Here is my jQuery solution. I'm not much of a coder so feel free to tweak this:

`jQuery(function(){

 var rightColHeight = jQuery('div.right_column').height();  
 var leftColHeight = jQuery('div.left_column').height();

 if (rightColHeight > leftColHeight){  
 jQuery('.content_wrap').height(rightColHeight+'px');  

}
}); `