La barre de défilement fantôme — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 5)

La barre de défilement fantôme

Le modèle de boîte · niveau 3 (difficile)

Énoncé

Une page affiche un bandeau de promotion. Dans une fenêtre de 800 pixels, une barre de défilement horizontale apparaît, alors que rien ne semble dépasser.


body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

/* Erreur : 100 % + 2 × 20px de padding dépasse la fenêtre */
.bandeau {
  width: 100%;
  padding: 20px;
  background: #e07a1f;
}

Calculer la largeur du bandeau, et la largeur de la page qui en résulte.
Corriger avec une seule déclaration.
Donner une deuxième correction, sans box-sizing.

Corrigé

En content-box, width: 100% donne au contenu la largeur du parent, 800 pixels ; le rembourrage s'y ajoute : $800 + 2 \times 20 = 840$ . La page mesure donc 840 pixels de large (scrollWidth 840 dans Chromium) et défile de 40 pixels.
box-sizing: border-box : les 800 pixels comprennent le rembourrage, et la page retrouve sa largeur de 800.


body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

.bandeau {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  background: #e07a1f;
}

Supprimer width: 100% : un bloc prend déjà toute la largeur disponible (width: auto), rembourrage compris. Cette déclaration n'était pas seulement inutile, elle était nuisible.