Cours CSS / Largeur, hauteur, limites min/max et box-sizing

La largeur et la hauteur CSS définissent des dimensions préférées, tandis que min-width, max-width, min-height et max-height imposent des limites. Avec box-sizing: border-box, les dimensions déclarées incluent le padding et les bordures, mais une limite de hauteur nécessite toujours une stratégie de débordement délibérée.

Comparer content-box et border-box

Attribuez aux deux cartes width: 300px, 20px de padding de chaque côté et des bordures de 2px. Avec content-box, le contenu mesure 300px et le border-box mesure 344px. Avec border-box, le border-box mesure 300px et le contenu mesure 256px. La marge est à l'extérieur de la largeur déclarée dans les deux cas. Voir Le modèle de boîte CSS : Contenu, Padding, Bordure et Marge.

border-box garde le padding et les bordures à l'intérieur de la taille déclarée. Augmenter le padding réduit la largeur du contenu disponible et peut augmenter le retour à la ligne. Si le padding et les bordures seuls dépassent la largeur déclarée, le contenu ne peut pas devenir négatif, donc la boîte réelle peut dépasser cette largeur. Voir MDN : box sizing.

*, *::before, *::after { box-sizing: border-box; }

Règles communes pouvant être utilisées pour unifier les méthodes de calcul dans de nouveaux documents. Nous avons également inclus les pseudo-éléments pour être calculés de la même manière. Si vous l'appliquez aux pages existantes par lots, la mise en page créée sur la base du content-box peut changer, donc vérifiez d'abord l'espace requis. L'exemple complet applique les règles communes, mais réaffecte le content-box uniquement à .content pour comparaison.

Définir des largeurs fluides et des limites minimales ou maximales

.fluid { width: 100%; max-width: 32rem; min-height: 10rem; }

.limits { width: 100%; min-width: 180px; max-width: 320px; }

width: 100% est basé sur la largeur du bloc contenant, et max-width limite sa croissance sur des écrans larges. Sous la condition que la taille de police racine soit de 16px, 32rem équivaut à 512px. min-width est la limite inférieure de sa taille minimale. Même si l'écran est plus étroit que 180px, maintenir la largeur minimale peut provoquer un débordement horizontal.

Une contrainte minimale l'emporte lorsqu'elle est en conflit avec un maximum : min-width: 360px avec max-width: 320px n'autorise pas la boîte à devenir plus petite que 360px. Les contraintes de hauteur correspondantes se comportent de manière similaire. Les tailles minimales automatiques de Flexbox et Grid nécessitent leurs propres vérifications ; utilisez min-width: 0 là où c'est approprié. Voir MDN : min width, MDN : min height.

Comparer les hauteurs automatiques, fixes et contraintes

Une limite de hauteur ne supprime pas automatiquement le texte débordant. Le débordement par défaut peut l’afficher en dehors de la boîte ; l’option hidden peut couper des informations dont le lecteur a besoin. Lors de la combinaison de la hauteur maximale et du défilement, vérifiez également l’accès au clavier et l’interaction mobile. L’exemple complet laisse un espace supplémentaire après les boîtes afin que vous puissiez observer l’échec de la hauteur fixe. Si une boîte ne se réduit pas comme prévu, examinez également Débordement, retour à la ligne des textes longs et points de suspension.

Comprendre les conditions de hauteur en pourcentage

.height-parent { height: 200px; }

.half { height: 50%; }

Dans un flux de bloc normal, un parent avec une hauteur explicite de 200px permet à un enfant de height: 50% de se résoudre à 100px. Si la hauteur du parent dépend du contenu, ce calcul simple se résout généralement en auto à la place. Une hauteur minimale seule ne fournit pas la même condition. Le positionnement absolu, Flexbox et Grid peuvent avoir des règles de résolution de pourcentage différentes. Voir MDN : height.

Exécutez l'exemple et comparez les dimensions

Enregistrez le code ci-dessous en UTF-8 dans sizing.html. Il comprend deux calculs de largeur, une limite de taille et une comparaison de hauteurs utilisant le même texte.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing width and height</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .compare { width: 300px; padding: 20px; border: 2px solid #3d6b89;
      margin-block: 16px; background: #eef6fa; }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; }
    .fluid { width: 100%; max-width: 32rem; min-height: 10rem;
      padding: 24px; border: 2px solid #3d6b89; }
    .limits { width: 100%; min-width: 180px; max-width: 320px;
      padding: 12px; border: 1px solid #777; margin-block: 16px; }
    .height-box { width: 100%; max-width: 300px; padding: 12px;
      border: 2px solid #b98022; margin-block-end: 16px; }
    .height-box p { margin: 0; }
    .fixed { height: 96px; margin-block-end: 120px; }
    .minimum { min-height: 160px; }
    .limited { max-height: 96px; overflow: auto; }
    .height-parent { height: 200px; max-width: 300px; background: #eee; }
    .half { height: 50%; background: #cbe8d7; }
  </style>
</head>
<body>
  <h1>Comparing element sizes</h1>
  <h2>Same width: 300px</h2>
  <div class="compare content">content-box：344px to border</div>
  <div class="compare border">border-box：300px to border</div>
  <h2>Fluid width with minimum and maximum limits</h2>
  <div class="fluid">The maximum width is 32rem and the minimum height is 10rem. Try adding more sentences.</div>
  <div class="limits">The width is at least 180px and at most 320px.</div>
  <h2>fixed height 96px</h2><div class="height-box fixed"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Height that fits the content</h2><div class="height-box"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Minimum height: 160px</h2><div class="height-box minimum"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>Maximum height: 96px, with scrolling</h2><div class="height-box limited" tabindex="0" role="region" aria-label="Maximum Height Comparison"><p>The garden notice may grow as details about opening hours and preparation are added. A fixed height can make this text overflow the box. Check that readers can reach the last sentence.</p></div>
  <h2>200px height of 50% of parent</h2><div class="height-parent"><div class="half">Height: 100px</div></div>
</body>
</html>

1. Vérifiez la largeur réelle de .content et .border dans une grande fenêtre. Elles sont respectivement de 344px et 300px. Si vous modifiez uniquement le padding de la boîte de contenu à 30px, il sera de 364px, et la largeur externe de la boîte de bordure sera de 300px même après le même changement.
2. Réduisez la largeur de la fenêtre pour voir si le .fluid rétrécit avec son parent. Dans une grande fenêtre avec une racine de 16px, le maximum est de 512px. Si vous modifiez temporairement min-width dans .limits à 360px, il sera supérieur au max-width de 320px. Revenez à 180px.
3. Ajoutez la même phrase aux quatre boîtes de comparaison de hauteur. Le texte peut dépasser de la boîte à hauteur fixe, les hauteurs auto et min-height devront croître selon les besoins, et le panneau max-height devra rester lisible avec défilement interne.
4. Supprimez height: 200px du parent. Vérifiez que la hauteur de 50 % de l'enfant ne reste plus à 100px, puis restaurez la déclaration originale pour vous assurer qu'elle est à nouveau de 100px.
5. Augmentez la taille de la police ou le taux de grossissement de votre navigateur. Assurez-vous que les lettres ne sont pas coupées ou superposées à une hauteur fixe, et exercez votre jugement pour utiliser auto pour le texte principal qui ne nécessite pas de restriction de taille.

width: 100 %, mais si ça déborde horizontalement, vérifiez dans l'ordre : box-sizing, marges gauche et droite, grande min-width, et longue chaîne. Ne confondez pas la taille du contenu affichée dans les Outils de développement avec la taille de la bordure. Après avoir changé la valeur, revenez à la déclaration originale pour maintenir la condition de comparaison.