Comment remplir l'espace vertical restant dans une division Wrapper avec une deuxième division à l'aide de CSS ?

Utiliser CSS pour remplir l'espace vertical

Question :

Vous avez une mise en page avec un div #wrapper contenant #first et #seconde divisions. Vous devez remplir l'espace vertical restant de #wrapper sous #first avec #second, en utilisant uniquement CSS.

Solution :

1. Disposition Flexbox :

   • Définissez le div wrapper pour afficher : flex et flex-direction : colonne. Cela définit une disposition verticale.
   • Réglez la hauteur de l'emballage à 100 %.

2. Contrôle de la hauteur :

   • Réglez la hauteur du premier div sur une valeur fixe (par exemple, 50 px) pour vous assurer qu'il ne s'étendra pas.

3. Flex- Grow Property :

   • Utilisez la propriété flex-grow sur la deuxième div. Cette propriété permet au deuxième div de s'étendre verticalement et de remplir l'espace restant. Réglez flex-grow sur 1 pour le rendre flexible.

Exemple de code :

<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>

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!