¿Cómo puedo hacer que un DIV ocupe el resto de la altura de un contenedor div?

Question

Tengo un div con dos divs anidados. El primer niño tiene una altura variable dependiendo de su contenido, quiero que la segunda altura de divs sea lo que sobra del padre.

<div style="height:500px;"> 
    <div>Some Content Here</div> 
    <div>This div needs to take up the rest of the space of its parent</div> 
</div> 

¿Cómo puedo hacer esto?

Gracias, ~ ck en San Diego

Answer 1

Se hace uso de JavaScript. Veo que estás usando jQuery, por lo que este debe trabajar:

Dale un documento de identidad a su padre div:

<div style="height:500px;" id="parent"> 
    <div>Some Content Here</div> 
    <div>This div needs to take up the rest of the space of its parent</div> 
</div> 

Luego, en jQuery:

$('div#parent div:last').each(function() { 
    var p = $(this).parent(); 
    $(this).height(p.height() - ($(this).offset().top - p.offset().top)); 
}); 

Answer 2

Creo que tengo una forma correcta de hacerlo sin Javascript:

<div style="height:500px; background:pink; overflow: hidden"> 
    <div style="background: yellow">stuff</div> 
    <div style="height: 100%; background: red;">This div needs to take up the rest of the space</div> 
</div> 

la clave ser "overflow: hidden" en el div principal, como la creación de la altura del segundo div al 100% lo hace 500 píxeles de alto.