Expand the div to the bottom of the parent container

Question

I have a div #parentthat hasmin-height:400px;

This div contains 2 child divs, the last of which I want to expand to the bottom of my parent, despite the amount of content inside it.

The height of the parent is fluid since the contents can be large or very small.

<div id="parent">
     <div id="child1"><!-- content here --> </div>
     <div id="child2><!-- this div should stretch down to bottom of parent container--></div>
</div>

#parent{min-height:400px;}

Is this possible - I can't use js hacks

Answer 1

EDIT: Sorry, this does not actually work - the bottom div does not expand to fit the content: http://i.stack.imgur.com/pQpFk.png p>

As long as it #child1has a fixed height, this is possible. So you have:

<div id="parent">
     <div id="child1">&nbsp;</div>
     <div id="child2">&nbsp;</div>
</div>

And then the CSS you use:

#parent {
    min-height:200px;
    height:300px;
    position:relative;
    width:100%;
}
#child1 {
    position:absolute;
    height:50px;
    top:0;
    left:0;
    width:100%;
    background-color:blue;
}
#child2 {
    position:absolute;
    top:50px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:red;
}

. : http://jsfiddle.net/U8VdV/

#child1 , .

Answer 2

CSS. , , , , YUI Layout Manager. , JQUERY - . , , .