Remplir la largeur restante d'un conteneur avec CSS

Dans un scénario où vous avez un en-tête avec trois éléments disposés dans une rangée, le l'objectif est que l'élément du milieu occupe l'espace restant dans l'en-tête. Pour y parvenir, la combinaison de l'affichage en bloc en ligne et de la fonction calc() en CSS s'avère efficace.

La solution de code

La structure HTML fournie se compose d'un en-tête contenant une image, un élément du milieu avec du texte et un élément de droite. Pour manipuler leur mise en page, nous appliquons CSS comme suit :

header {
  background: red;
}

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

#right {
  background: green;
  display: inline-block;
  width: calc(100% - 100px);
}

Explication

• Inline-Block : L'affichage des éléments sous forme de blocs en ligne garantit qu'ils restent sur la même ligne et se comportent comme un bloc éléments, permettant des ajustements de largeur et de hauteur.
• calc() Fonction : Cette fonction effectue des opérations mathématiques sur les valeurs CSS. Dans ce cas, nous calculons la largeur restante en soustrayant la largeur fixe de l'élément de gauche (100 px) de 100 %.

Le résultat de ce code est que l'élément du milieu s'étire pour remplir l'espace restant. dans l'en-tête, accueillant son contenu tandis que l'élément de droite conserve sa largeur de 100 px.

Alternative Solution

Si vous préférez avoir un espace entre les divs, vous pouvez modifier le CSS en définissant la taille de police de l'élément externe (en-tête) sur 0 :

header {
  font-size: 0;
  ...
}