Comment puis-je faire un DIV prendre le reste de la hauteur d'un conteneur div?

Question

J'ai une div avec deux divs imbriqués. Le premier enfant a une hauteur variable en fonction de son contenu, je veux que la hauteur de la 2ème div soit celle qui reste du parent.

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

Comment est-ce que je peux faire ceci?

Merci, ~ ck à San Diego

Answer 1

Il nécessite un certain javascript. Je vois que vous utilisez jQuery, donc cela devrait fonctionner:

Donnez à votre identifiant certains div parent:

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

Puis, en jQuery:

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

Answer 2

Je pense que j'ai un bonne façon de le faire sans 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> 

le « overflow: hidden » clé étant sur la principale div, comme réglage de la hauteur de la 2ème div à 100% fait 500 pixels de haut.