Docs CSS exécutables : Width et height

Q: Quelle est la différence entre width: 100% et width: auto ?

Pour un élément de type bloc, auto remplit le conteneur, padding et bordure compris. width: 100% donne au contenu la largeur du conteneur : avec box-sizing: content-box (par défaut), tout padding ou toute bordure fait déborder l'élément.

Q: Quelle est la différence entre width et max-width ?

width définit une taille exacte. max-width fixe une limite haute : l'élément peut être plus étroit, par exemple sur un téléphone, mais jamais plus large. width: 100%; max-width: 600px; remplit les petits écrans et s'arrête à 600px sur les grands.

Q: Comment donner à un élément toute la hauteur de l'écran ?

Utilisez min-height: 100vh (ou 100dvh pour tenir compte des barres d'outils des navigateurs mobiles). min-height plutôt que height permet à la section de grandir si son contenu est plus haut que l'écran.

Définir width et height

width et height définissent la taille de la boîte de contenu d'un élément. Par défaut, le padding et la bordure s'ajoutent à l'extérieur de cette taille.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Width and height</title>
  <style>
    .box {
      width: 240px;
      height: 80px;
      background: #2563eb;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>
  <script>
    const box = document.getElementById('box');
    box.textContent = 'width 240px + padding = ' + box.offsetWidth + ' x ' + box.offsetHeight + 'px';
  </script>
</body>
</html>

La boîte fait 260 pixels sur 100 : 240 sur 80 de contenu, plus 10px de padding de chaque côté. Avec box-sizing: border-box, elle ferait exactement 240 sur 80 ; la page du modèle de boîte explique les deux.

Les valeurs

Valeur	Exemple	Sens
`auto`	`width: auto`	La valeur par défaut. Les blocs remplissent la largeur de leur conteneur ; la hauteur s'adapte au contenu
Longueur	`300px`, `20rem`	Une taille fixe
Pourcentage	`50%`	De la largeur (pour `width`) ou de la hauteur (pour `height`) du bloc conteneur
Unités de viewport	`100vh`, `50vw`, `100dvh`	De la fenêtre du navigateur
`min-content`	`width: min-content`	Aussi étroit que possible, le mot le plus long décide
`max-content`	`width: max-content`	Aussi large que le contenu sur une ligne
`fit-content`	`width: fit-content`	Comme `max-content`, mais jamais plus large que le conteneur

Pourquoi height: 100% ne fait rien

Une height en pourcentage a besoin d'un parent dont la hauteur est définie pour en calculer le pourcentage. Quand la hauteur du parent vaut auto, ce qui est le cas normal, le height: 100% de l'enfant se comporte lui aussi comme auto.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height 100%</title>
  <style>
    .parent { background: #e5e7eb; padding: 6px; margin-bottom: 12px; display: flow-root; }
    .fixed { height: 120px; }
    .child { height: 100%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Parent height auto: 100% is ignored</div>
  </div>
  <div class="parent fixed">
    <div class="child">Parent height 120px: 100% works</div>
  </div>
</body>
</html>

Le premier enfant n'est pas plus haut que son texte. Le second remplit son parent parce que le parent a une hauteur. Pour qu'une chaîne de pourcentages fonctionne sur toute une page, chaque ancêtre jusqu'à html et body doit avoir une hauteur, c'est pourquoi la plupart des mises en page utilisent plutôt flexbox ou grid : leurs enfants s'étirent pour remplir l'espace sans aucun pourcentage.

min-height et max-width : des tailles qui s'adaptent

Les tailles fixes cassent facilement : une hauteur fixe déborde quand le texte est plus long que prévu, et une largeur fixe est trop large pour un téléphone. Les propriétés min- et max- fixent des limites plutôt que des tailles exactes.

Propriété	Sens
`min-width`	Jamais plus étroit que cela
`max-width`	Jamais plus large que cela
`min-height`	Jamais moins haut que cela, mais peut grandir
`max-height`	Jamais plus haut que cela (le contenu en trop déborde)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    .card {
      max-width: 360px;   /* narrower on small screens, never wider */
      min-height: 50px;   /* at least 50px, grows with content */
      border: 2px solid #2563eb;
      padding: 10px;
      margin-bottom: 12px;
    }
    .fixed {
      max-width: 360px;
      height: 50px;       /* fixed: long text spills out */
      border: 2px solid #f59e0b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">Short card: the 50px minimum.</div>
  <div class="card">A card with much more text. It keeps its 360px limit but grows taller, because min-height sets a floor, not a fixed size. The border stays around all of the text, however many lines there are. Add another sentence here and the card simply gets taller again.</div>
  <div class="fixed">A fixed height of 50px with long text. The text no longer fits, so it spills past the amber border and over whatever comes next on the page. A fixed height cannot know how long the text will be, or how large the reader has set the font.</div>
</body>
</html>

Sur un écran de moins de 360px, comme un téléphone, les cartes rétrécissent avec lui, car max-width n'est qu'un plafond.

Quand une taille et une limite s'appliquent en même temps, les limites gagnent : max-width l'emporte sur width, et min-width sur max-width.

width: auto ou width: 100%

Pour un élément de type bloc, laisser width à auto est presque toujours ce qu'il vous faut. auto fait tenir toute la boîte, padding et bordure compris, dans le conteneur. 100% rend le contenu aussi large que le conteneur, puis ajoute le padding et la bordure par-dessus :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto vs 100%</title>
  <style>
    .container { width: 300px; background: #e5e7eb; padding: 8px 0; }
    .item { padding: 10px; border: 3px solid #2563eb; margin: 6px 0; }
    .auto { width: auto; }
    .full { width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item auto">width: auto, fits</div>
    <div class="item full">width: 100%, overflows</div>
  </div>
  <p id="out"></p>
  <script>
    const w = (s) => document.querySelector(s).offsetWidth;
    document.getElementById('out').textContent =
      'container 300px, auto ' + w('.auto') + 'px, 100% ' + w('.full') + 'px';
  </script>
</body>
</html>

width: 100% reste utile sur les éléments qui ne sont pas des blocs par défaut (un <input>, une <img>, un inline-block), idéalement avec box-sizing: border-box.

S'adapter au contenu : fit-content

Pour qu'un bloc ne soit pas plus large que son texte, sans le passer en inline-block, utilisez fit-content :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fit-content</title>
  <style>
    div { background: #16a34a; color: white; padding: 6px 10px; margin-bottom: 8px; }
    .fit { width: fit-content; }
    .min { width: min-content; }
  </style>
</head>
<body>
  <div>auto: full width</div>
  <div class="fit">fit-content: as wide as the text</div>
  <div class="min">min-content: one word per line</div>
</body>
</html>

fit-content avec margin-inline: auto centre une étiquette ou un bloc de type bouton qui garde exactement la largeur de son texte.

Sections pleine hauteur et unités de viewport

vh vaut 1 % de la hauteur du viewport et vw 1 % de sa largeur. Sur téléphone, la barre d'adresse du navigateur grandit et rétrécit pendant le défilement, donc 100vh peut être plus haut que ce que vous voyez. L'unité dynamique dvh suit la zone visible, et svh utilise la plus petite hauteur visible :

.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* follows mobile toolbars */
}

Utilisez min-height, pas height, pour les sections plein écran : un petit écran avec beaucoup de texte obtient ainsi une section qui grandit. Une hauteur fixe avec un contenu qui ne tient pas fait déborder ce contenu, ce que traite la page overflow CSS.

Erreurs courantes

height: 100% dans un parent sans hauteur. Il se comporte comme auto. Donnez une hauteur au parent ou utilisez flex ou grid.
width: 100% avec du padding. L'élément déborde de son conteneur. Laissez la largeur des blocs à auto, ou utilisez box-sizing: border-box.
Des hauteurs fixes sur des conteneurs de texte. Utilisez min-height pour qu'un texte plus long ou une police plus grande ne déborde pas.
width sur un élément inline. <span> et <a> ignorent width et height ; passez-les en inline-block ou block.
width: 1200px sur le conteneur d'une page. La page défile horizontalement sur tous les téléphones. Utilisez plutôt max-width: 1200px.

Questions fréquentes

Pourquoi height: 100% ne fonctionne-t-il pas ?

Une hauteur en pourcentage est un pourcentage de la hauteur du parent, et elle ne fonctionne que si cette hauteur est définie. Si la hauteur du parent vaut auto (déterminée par son contenu), le pourcentage est traité comme auto. Donnez une hauteur au parent, ou utilisez flexbox ou grid, qui étirent les enfants sans pourcentage.

Quelle est la différence entre width: 100% et width: auto ?

Pour un élément de type bloc, auto remplit le conteneur, padding et bordure compris. width: 100% donne au contenu la largeur du conteneur : avec box-sizing: content-box (par défaut), tout padding ou toute bordure fait déborder l'élément.

À quoi sert min-height en CSS ?

Il définit la plus petite hauteur qu'un élément peut avoir tout en le laissant grandir avec son contenu. min-height: 200px donne 200px à une carte vide, et une carte avec plus de texte devient plus haute au lieu de déborder, ce qu'une height fixe ne permettrait pas.

Quelle est la différence entre width et max-width ?

width définit une taille exacte. max-width fixe une limite haute : l'élément peut être plus étroit, par exemple sur un téléphone, mais jamais plus large. width: 100%; max-width: 600px; remplit les petits écrans et s'arrête à 600px sur les grands.

Comment donner à un élément toute la hauteur de l'écran ?

Utilisez min-height: 100vh (ou 100dvh pour tenir compte des barres d'outils des navigateurs mobiles). min-height plutôt que height permet à la section de grandir si son contenu est plus haut que l'écran.

Concepts liés