Faire div (hauteur) occuper la hauteur restante du parent

agrandir le #down enfant pour remplir l'espace restant de #container peut être accompli de différentes façons selon le support de navigateur que vous souhaitez atteindre et si oui ou non #up a une hauteur définie.

Échantillons

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

Grille

CSS grid encore des offres de mise en page une autre option, bien qu'elle ne soit pas aussi simple que le modèle Flexbox. Toutefois, il ne nécessite que le style de l'élément de conteneur:

.container { display: grid; grid-template-rows: 100px }

le grid-template-rows définit la première ligne comme une hauteur fixe de 100px, et les lignes restantes s'étireront automatiquement pour remplir l'espace restant.

je suis assez sûr que IE11 nécessite -ms- préfixes, donc assurez-vous de valider la fonctionnalité dans les navigateurs que vous souhaitez prendre en charge.

Flexbox

Css3's Flexible Box Layout Module ( flexbox ) est maintenant bien pris en charge et peut être très facile à mettre en œuvre. Parce qu'il est flexible, il fonctionne même quand #up n'a pas une hauteur définie.

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

il est important de noter que le support IE10 & IE11 pour certaines propriétés flexbox peut être bogué, et que IE9 ou ci-dessous n'a aucun support.

Hauteur Calculée

une autre solution facile est d'utiliser le CSS3 calc unité fonctionnelle, comme Alvaro le souligne dans sa réponse , mais il exige que la taille du premier enfant soit une valeur connue:

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

il est assez largement soutenu, avec les seules exceptions notables étant <= IE8 ou Safari 5 (Pas de soutien) et IE9 (soutien partiel). Quelque d'autres problèmes comprennent l'utilisation calc en conjonction avec transform ou box-shadow , alors assurez-vous de tester dans plusieurs navigateurs si cela vous concerne.

Autres Variantes

si un support plus ancien est nécessaire, vous pouvez ajouter height:100%; à #down fera le div pink pleine hauteur, avec une mise en garde. Il causera un débordement pour le container, parce que #up le pousse vers le bas.

par conséquent, vous pouvez ajouter overflow: hidden; au conteneur pour corriger cela.

alternativement, si la hauteur de #up est fixe, vous pouvez le positionner absolument à l'intérieur du conteneur, et Ajouter un dessus de rembourrage à #down .

et, encore une autre option serait d'utiliser un affichage de table:

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