Comment remplir la largeur restante d’un élément conteneur en CSS ?

Remplir la largeur restante du conteneur avec CSS

Dans le domaine de la conception Web, il est souvent essentiel de remplir l'espace restant dans un élément conteneur . Cela peut être particulièrement utile pour créer des en-têtes ou des barres de navigation qui occupent une partie de l'écran. Explorons comment y parvenir en utilisant CSS.

Considérez l'extrait de code suivant :

<code class="html"><header>
  <img src="image.jpg" />
  <div id="middle">Middle Element</div>
  <div id="right">Right Element</div>
</header></code>

<code class="css">header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
}</code>

Comme vous pouvez le voir, le div avec l'identifiant "milieu" devrait remplir l'espace restant dans la barre d'en-tête. Utilisons CSS pour y arriver :

<code class="css">#middle {
  flex: 1; /* New code */
}</code>

En ajoutant flex:1, vous indiquez au navigateur d'utiliser un schéma de dimensionnement flexible pour cet élément, où il prend le plus de place possible tout en respectant les contraintes de son conteneur.

Notes supplémentaires :

• La fonction calc() peut être utilisée pour effectuer des opérations mathématiques sur les valeurs CSS. Dans ce cas, calc(100% - 100px) calculerait la largeur restante du conteneur après que le div gauche ait occupé 100px.
• Vous pouvez également définir font-size: 0 sur l'élément externe pour supprimer tout espaces entre les éléments en ligne.

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!