Faire en sorte que la div (hauteur) occupe la hauteur restante du parent

Question

Considérons l'exemple de code HTML/css suivant :

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

où j'ai un conteneur div avec deux enfants (également ici : http://jsfiddle.net/S8g4E/ ). Le premier enfant a une taille donnée. Comment puis-je faire en sorte que le deuxième enfant occupe l'"espace libre" du conteneur ? div sans donner de hauteur spécifique ?

Dans l'exemple, le rose div doit également occuper l'espace blanc.

---

Semblable à cette question : Comment faire en sorte que la div occupe la hauteur restante ?

Mais je ne veux pas donner position absolue .

Answer 1

Voir la démo - http://jsfiddle.net/S8g4E/6/

utiliser css -

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}

Answer 2

Vous pouvez utiliser des flottants pour faire descendre le contenu :

http://jsfiddle.net/S8g4E/5/

Vous disposez d'un conteneur de taille fixe :

#container {
    width: 300px; height: 300px;
}

Le contenu est autorisé à circuler à côté d'un flotteur. Sauf si l'on définit le flotteur comme étant de pleine largeur :

#up {
    float: left;
    width: 100%;
}

Tandis que #up et #down partagent la première place, #down ne peut commencer qu'après le bas de la fenêtre flottante. #up :

#down {
    height:100%;
}​

Answer 3

<div class='parent'>
  <div class='child'>
  <div class='child last'>
</div>

<style>
.parent {
  display: flex;
  flex-direction: column;

  .child {
     &.last {
        flex-grow: 1;
     }
  }
}
</style>

Answer 4

Je ne suis pas sûr qu'il soit possible de le faire uniquement avec CSS, à moins que vous ne soyez à l'aise pour faire semblant avec des illusions. Utilisez peut-être la réponse de Josh Mein, et mettez #container a overflow:hidden .

Pour ce qu'elle vaut, voici une solution jQuery :

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);