Voici quelques options de titre qui correspondent au contenu et au style de votre article : Option 1 (direct et clair) : * Comment distribuer l'espace vertical restant avec Flexbox Option 2 (Format des questions) : * Je veux

Obtenir une répartition idéale de la hauteur avec Flexbox et l'espace vertical restant

Flexbox présente une solution CSS élégante et efficace pour remplir l'espace vertical restant dans un élément conteneur. Dans ce cas, nous visons à répartir la hauteur entre les div #first et #second dans le conteneur #wrapper, en veillant à ce que #second occupe l'espace restant.

La solution adoptée exploite le code CSS suivant :

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

Au sein de la div #wrapper, nous établissons une disposition flexbox avec une orientation verticale. Cela permet aux deux divs, #first et #second, de s'aligner verticalement. La hauteur de #wrapper est définie sur 100 %, garantissant qu'il occupe toute la hauteur de la fenêtre d'affichage.

Pour spécifier la hauteur de #first, nous attribuons une valeur fixe de 50 px. Pendant #seconde, nous exploitons la propriété flex-grow pour contrôler sa hauteur. En définissant flex-grow sur 1, nous indiquons que #second doit s'étendre pour remplir tout espace restant dans le conteneur #wrapper.

En conséquence, #first occupe la hauteur fixe de 50px, tandis que #second s'ajuste dynamiquement sa hauteur pour remplir l'espace vertical restant. Cela garantit que la mise en page s'adapte aux différentes tailles d'écran et orientations de l'appareil.

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!