Comment remplir l'espace vertical restant avec un Div en utilisant uniquement CSS ?

Remplir de manière réactive l'espace vertical avec #seconde en utilisant uniquement CSS

Question :

Comment peut-on nous remplissons l'espace vertical restant sous #first dans #wrapper en utilisant uniquement CSS ?

Solution :

Pour y parvenir, nous pouvons utiliser les propriétés flexbox en CSS :

<code class="css">html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}</code>

HTML :

<code class="html"><div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div></code>

Explication :

1. Définir la hauteur à 100 % pour le HTML et body pour occuper toute la hauteur de la fenêtre.
2. Créez un conteneur parent .wrapper avec display: flex.
3. Définissez flex-direction: column pour organiser les éléments enfants verticalement.
4. Attribuez une hauteur fixe à .first pour déterminer sa taille.
5. Utilisez flex-grow : 1 sur .second pour lui permettre de s'étendre et de remplir l'espace vertical restant.

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!