Comment faire en sorte qu'un div occupe l'espace vertical restant avec CSS ?

Remplir l'espace vertical restant avec CSS

Le HTML donné comprend deux divs (#first et #second) dans un wrapper div (# emballage). L'objectif est d'occuper l'espace vertical restant en dessous de #first en utilisant #second div uniquement avec CSS.

Pour y parvenir, modifiez le code CSS comme suit :

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

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

.first {
  height: 50px;
  background-color: #b2efd8;
}

.second {
  flex-grow: 1;
  background-color: #80c7cd;
}</code>

Ce code révisé accomplit la tâche en définissant les éléments suivants :

• Définissez la hauteur des éléments HTML et du corps à 100 % de hauteur pour que la page Web entière remplisse l'écran verticalement.
• Modifiez les div #wrapper display pour "flex" et configurez-le comme un conteneur flexible vertical.
• Attribuez une hauteur fixe à #first div, en vous assurant qu'il occupe 50 pixels verticalement.
• Appliquez la propriété flex-grow à #second div avec une valeur de 1. Cela permet à #second de remplir automatiquement l'espace vertical restant dans #wrapper.

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!