Élargissement de la #down pour remplir l'espace restant de #container peut être réalisée de différentes manières, en fonction de la compatibilité avec le navigateur que vous souhaitez obtenir et de l'existence ou non de l'option #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's grid offre une autre option, même si elle n'est pas aussi simple que le modèle Flexbox. Cependant, il suffit de styliser l'élément conteneur :
.container { display: grid; grid-template-rows: 100px }
En grid-template-rows définit la première ligne comme étant d'une hauteur fixe de 100px, et les autres lignes s'étireront automatiquement pour remplir l'espace restant.
Je suis presque sûr qu'IE11 nécessite -ms- il faut donc veiller à valider la fonctionnalité dans les navigateurs que l'on souhaite prendre en charge.
Flexbox
CSS3 Module de mise en page de la boîte flexible ( flexbox ) est désormais bien supporté et peut être très facile à mettre en œuvre. Grâce à sa souplesse, il fonctionne même lorsque #up n'a pas de hauteur définie.
#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }
Il est important de noter que la prise en charge de certaines propriétés flexbox par IE10 et IE11 peut être boguée, et qu'IE9 ou les versions inférieures ne sont pas du tout prises en charge.
Hauteur calculée
Une autre solution simple consiste à utiliser la fonction CSS3 calc unité fonctionnelle, comme le souligne Alvaro dans sa réponse mais il faut que la taille du premier enfant soit une valeur connue :
#up { height: 100px; }
#down { height: calc( 100% - 100px ); }
Il est assez largement pris en charge, les seules exceptions notables étant <= IE8 ou Safari 5 (pas de prise en charge) et IE9 (prise en charge partielle). Parmi les autres problèmes, citons l'utilisation de calc en liaison avec transformer o ombre de la boîte Il convient donc de tester plusieurs navigateurs si cela vous intéresse.
Autres alternatives
Si un support plus ancien est nécessaire, vous pouvez ajouter height:100%; a #down rendra la div rose pleine hauteur, avec une mise en garde. Cela entraînera un débordement du conteneur, parce que #up le pousse vers le bas.
Vous pouvez donc ajouter overflow: hidden; au conteneur pour y remédier.
Par ailleurs, si la hauteur de #up est fixe, vous pouvez le positionner absolument dans le conteneur, et ajouter un padding-top à #down .
Une autre option consiste à utiliser un présentoir 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;}
