L'extension de l' #downenfant pour remplir l'espace restant de #containerpeut être réalisée de différentes manières en fonction du support du navigateur que vous souhaitez atteindre et de sa #uphauteur définie ou non .
É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>
la grille
La gridmise en page de CSS offre encore une autre option, bien qu'elle ne soit pas aussi simple que le modèle Flexbox. Cependant, il suffit de styliser l'élément conteneur:
.container { display: grid; grid-template-rows: 100px }
Le grid-template-rowsdéfinit la première ligne comme une hauteur fixe de 100 pixels, et les lignes restantes s'étirent automatiquement pour remplir l'espace restant.
Je suis presque sûr que IE11 nécessite des -ms-préfixes, alors assurez-vous de valider la fonctionnalité dans les navigateurs que vous souhaitez prendre en charge.
Flexbox
Le module de mise en page de boîte flexibleflexbox de CSS3 ( ) est maintenant bien pris en charge et peut être très facile à implémenter. Parce qu'il est flexible, il fonctionne même lorsqu'il #upn'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 d'IE10 et d'IE11 pour certaines propriétés de la flexbox peut être boguée, et IE9 ou une version antérieure n'a aucune prise en charge.
Hauteur calculée
Une autre solution simple consiste à utiliser l' unité fonctionnelle CSS3calc , comme le souligne Alvaro dans sa réponse , mais cela nécessite que la hauteur 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 support) et IE9 (support partiel). Certains autres problèmes incluent l'utilisation de calc en conjonction avec transform ou box-shadow , alors assurez-vous de tester dans plusieurs navigateurs si cela vous concerne.
Autres alternatives
Si un support plus ancien est nécessaire, vous pouvez ajouter height:100%;pour #downrendre le div rose pleine hauteur, avec une mise en garde. Cela provoquera un débordement du conteneur, car #upil le pousse vers le bas.
Par conséquent, vous pouvez ajouter overflow: hidden;au conteneur pour résoudre ce problème.
Sinon, si la hauteur de #upest fixe, vous pouvez le positionner de manière absolue dans le conteneur et ajouter un haut de remplissage à #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;}