Expand a div to bottom of its parent container

I have a div #parent which has a min-height:400px;

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

The height of pa开发者_如何学Pythonrent is fluid as content can be a lot 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 at all possible - I can't use any js hacks

EDIT: Sorry, this doesn't actually work - the bottom div doesn't expand to fit the content: http://i.stack.imgur.com/pQpFk.png

As long as #child1 has 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 is:

#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;
}

See example here: http://jsfiddle.net/U8VdV/

If #child1 cannot have a fixed height then you are out of luck.

This is very tricky to do with just CSS. It is possible, but it gets ugly, instead, when I need to do this, I use the YUI Layout Manager. I am sure JQUERY also has something similar as well. But I find this the easiest and most bug free way to do what your asking.