Pourquoi « 100vw » provoque-t-il parfois un débordement horizontal inattendu ?

100vw provoquant un débordement horizontal inattendu

Lors de l'attribution d'une largeur de 100vw à un élément, vous pouvez vous attendre à ce qu'il occupe toute la largeur de la fenêtre d'affichage sans provoquant d'éventuels débordements. Cependant, dans certaines circonstances, des barres de défilement horizontales peuvent apparaître malgré l'utilisation de 100vw.

Considérons l'exemple suivant :

html, body {
  margin: 0;
  padding: 0;
}
.box {
  width: 100vw;
  height: 100vh;
}

<div class="box">Screen 1</div>

Dans ce scénario, l'élément .box remplira l'écran sans aucune barre de défilement. Cependant, si vous ajoutez un deuxième élément .box en dessous du premier :

<div class="box">Screen 1</div>
<div class="box">Screen 2</div>

Vous observerez l'apparition non seulement de barres de défilement verticales (attendues) mais également d'une légère barre de défilement horizontale.

La raison de ce comportement réside dans la manière dont 100vw est interprété par les navigateurs. Bien que cela signifie « 100 % de la largeur de la fenêtre », cela représente la partie visible de la fenêtre qui reste après avoir pris en compte l'épaisseur de la barre de défilement. Dans ce cas, la présence d'une barre de défilement verticale réduit la largeur de la fenêtre d'affichage disponible, ce qui peut provoquer un débordement horizontal du deuxième élément .box.

Pour résoudre ce problème, vous pouvez utiliser max-width: 100% sur le Élément .box :

.box {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
}

Cela garantira que l'élément ne dépasse jamais la véritable largeur de la fenêtre d'affichage, empêchant ainsi tout débordement horizontal potentiel.

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!