Expandir un div al fondo de su contenedor principal

Question

Tengo un div #parent que tiene una min-height:400px;

Esta div contiene 2 divs niño, la última de las cuales quiero ampliar hasta el fondo de su padre, a pesar de la cantidad de contenido dentro de ella.

La altura de los padres es fluida ya que el contenido puede ser mucho o muy pequeño.

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

¿Este es posible - no se puede utilizar cualquier hacks js

Answer 1

Esto es muy difícil de hacer con sólo CSS. Es posible, pero se pone feo, en cambio, cuando necesito hacer esto, uso el YUI Layout Manager. Estoy seguro de que JQUERY también tiene algo similar. Pero considero que esta es la manera más fácil y libre de errores para hacer lo que pides.

Answer 2

EDIT: Lo siento, esto en realidad no funciona - el div parte inferior no se expande para adaptarse al contenido: http://i.stack.imgur.com/pQpFk.png

Mientras #child1 tiene una altura fija, esto es posible. Por lo tanto, usted tiene:

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

Y entonces el CSS que se utiliza es:

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

Véase el ejemplo aquí: http://jsfiddle.net/U8VdV/

Si #child1 no puede tener una altura fija entonces estás de suerte.