Absolutely-position DIV to take full size of parent [Archive]

Calius

05-16-2006, 09:27 PM

Hello

I have a DIV (let's call it "the parent") which contains three child DIVs. Each of the children has some text in it. Neither the parent nor any of the three children have any special positioning attributes applied to them, and so the parent sizes just so that it wraps the children. So far so good.

Now I want another DIV child, which when visible will completly fill the parent (using the size the parent now has because of its other three children, not stretching the parent in any way).

I tried giving the parent "position:relative", and giving this fourth child "position:absolute; top:0; left:0; width:100%; height:100%", which works fine in FF but doesn't work in IE. I tried also "bottom:0; right:0" instead of the "width:100%; height:100%", still to no avail.

Is there a way to make this work in IE?

Is there maybe another way to make this without absolutely-positioning the fourth DIV?

Cheers,
Calius

<html>
<body>

This is a test<br />
<div style="width:400px; position:relative; border:1px solid red;">
<div style="position:absolute; background-color:green; height:100%; left:0; top:0; width:100%;">COVER ALL</div>
<div style="border:1px solid blue; margin-bottom:16px;">1</div>
<div style="border:1px solid blue; margin-bottom:16px;">2</div>
<div style="border:1px solid blue;">3</div>

</div>
This is a test<br />
</body>
</html>

mwinter

05-17-2006, 12:37 PM

I tried giving the parent "position:relative", and giving this fourth child "position:absolute; top:0; left:0; width:100%; height:100%", which works fine in FF but doesn't work in IE. I tried also "bottom:0; right:0" instead of the "width:100%; height:100%", still to no avail.The former (height: 100%) doesn't work in quite the way you think it does. In fact, what you propose as an alternative (bottom: 0) is actually exactly equal.

As you no doubt know, when box dimensions are specified using percentages, the value is derived from the computed value of the height or width properties of the containing block. However, a percentage height property value is special in that it requires an explicit height on the container. That is, of the following four groups, only the third and fourth set an actual height for the inner element. In the other cases, the height of the child is determined as if the value was auto.

#parent {
height: auto; /* or no height declaration at all. */
}
#child {
height: 50%;
}

#parent {
height: 100%; /* As there is no explicit height for the container
* of this element, the value is equivalent to auto.
*/
}
#child {
height: 50%;
}

#parent {
height: 10em;
}
#child {
height: 50%; /* 5em */
}

#grandparent {
height: 10em; /* Note that this declaration wasn't present in (2). */
}
#parent {
height: 100%; /* 10em */
}
#child {
height: 50%; /* 5em */
}

So, what does this have to do with the bottom property? In the algorithm for computing the height of absolutely-positioned elements (http://www.w3.org/TR/REC-CSS2/visudet.html#abs-non-replaced-height), there are a sequence of eliminations that try to cope with auto values for top and bottom margins, height, and the top and bottom properties. This algorithm states that if both the height and bottom properties have an 'actual value' of auto, the value for bottom is replace with zero (0). As a result,

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
is the same as:

position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
height: auto;

Is there a way to make this work in IE?Not that I can think of at the moment. For some reason, IE doesn't like having to deal with explicitly set top and bottom properties; it ignores the latter. You could try using an expression (an IE feature) that takes the height of the parent element and assigns it to the height property, but that would only work if the user has scripting enabled (it relies on JScript).

position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
height: expression(this.parentNode.clientHeight + 'px'); /* Untested */
Good luck,
Mike