Comment remplir la largeur restante du conteneur avec CSS à l'aide de « calc » ?

Remplir la largeur restante du conteneur avec CSS

L'objectif est de maximiser la largeur d'un élément nommé 'middle' dans un conteneur div, permettant pour occuper l'espace restant après avoir hébergé d'autres éléments.

Solution :

L'utilisation de la propriété CSS 'calc' est la clé pour y parvenir. En calculant la largeur disponible et en soustrayant la largeur fixe des autres éléments, nous pouvons déterminer dynamiquement la largeur restante.

<code class="css">#middle {
  display: inline-block;
  width: calc(100% - <fixed-element-width>);
}</code>

Dans l'exemple fourni :

<code class="html"><div class="left">100 px wide!</div><div class="right">Fills width!</div></code>

Et CSS :

<code class="css">.left {
  width: 100px;
}
.right {
  width: calc(100% - 100px);
}</code>

L'élément rouge a une largeur fixe de 100 px, tandis que l'élément bleu remplit l'espace restant après avoir pris en compte la largeur fixe.

Au lieu de ne laisser aucun espace entre les éléments, vous peut définir la taille de police : 0 sur l'élément du conteneur externe.

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!