Pourquoi l'utilisation de 100vw provoque-t-elle un débordement horizontal avec plusieurs éléments ?

Comprendre le débordement horizontal provoqué par 100vw

Lors de l'utilisation de 100vw pour définir la largeur des éléments, les développeurs peuvent rencontrer un débordement horizontal inattendu lorsque plusieurs de ces éléments sont présents. Bien que 100vw soit censé signifier « 100 % de la largeur de la fenêtre d'affichage », certains scénarios peuvent conduire à ce comportement.

Considérez le code suivant :

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

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

Ce code entraînera un seul élément qui remplit tout l’écran sans aucune barre de défilement. Cependant, si un deuxième élément est ajouté :

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

Le résultat n'est pas seulement des barres de défilement verticales (comme prévu) mais aussi un léger défilement horizontal. Pourquoi cela se produit-il ?

La raison réside dans la présence de barres de défilement verticales. Lorsque le contenu des éléments div dépasse leur hauteur, des barres de défilement verticales apparaissent. Cela réduit l'espace horizontal disponible pour les éléments, les faisant déborder horizontalement.

Pour résoudre ce problème, on peut ajouter max-width: 100%; à la classe box :

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

En limitant la largeur maximale de l'élément à 100 %, le débordement horizontal est évité même lorsque des barres de défilement verticales sont présentes.

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!