Comment puis-je faire en sorte qu'une division enfant occupe la hauteur restante de son parent ?

Comment faire en sorte qu'une division occupe la hauteur restante d'un parent

Considérez le code HTML et CSS suivant :

<div>

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

Ici, nous avons un conteneur div avec deux éléments enfants. Le premier enfant (#up) a une taille donnée, tandis que le second (#down) n'en a pas. Comment pouvons-nous faire en sorte que #down occupe la hauteur restante du div conteneur ?

Solution

Plusieurs méthodes peuvent y parvenir, en fonction de la compatibilité du navigateur et si #up a un hauteur fixe.

Options :

1. Disposition de la grille :

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

2. Disposition de la Flexbox :

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

3. Hauteur calculée :

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

4. Débordement caché :

.container {
  overflow: hidden;
}
.container .down {
  height: 100%;
}

Le choix de la méthode dépend des exigences spécifiques et de la prise en charge du navigateur. Notez que CSS inclut désormais la valeur de la propriété max-content pour le dimensionnement, qui peut convenir dans certains scénarios.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!