Pourquoi 100vw provoque-t-il un débordement horizontal et comment puis-je y remédier ?

Débordement horizontal avec 100vw : exploration du pourquoi et de la solution

L'utilisation de 100vw, qui signifie "100 % de la largeur de la fenêtre d'affichage ," est destiné à remplir la largeur visible de l'écran. Cependant, lorsque plusieurs éléments de cette largeur sont utilisés verticalement, un phénomène étrange se produit : une barre de défilement horizontale.

La cause profonde :

La clé pour comprendre ce problème réside dans le comportement des navigateurs Web dont le contenu déborde verticalement. Lorsque le contenu dépasse la hauteur de la fenêtre, une barre de défilement verticale est ajoutée. Cependant, dans certains navigateurs, cette barre de défilement verticale peut également introduire une barre de défilement horizontale en raison des calculs internes du navigateur.

La solution :

Pour éviter cette barre de défilement horizontale indésirable, la propriété CSS max-width: 100% peut être ajoutée aux éléments d'une largeur de 100vw. Cette règle supplémentaire garantit que la largeur des éléments ne dépasse jamais 100 % de la largeur de la fenêtre d'affichage, même si le contenu déborde verticalement.

Code révisé :

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

Par incorporant max-width : 100 %, la barre de défilement horizontale disparaît, permettant à plusieurs éléments d'une largeur de 100 vw de remplir l'écran sans aucun côté effets.

Par conséquent, le débordement horizontal avec 100vw ne se produit que lorsqu'il y a plusieurs éléments avec cette largeur en raison du comportement du navigateur avec le contenu débordant. En ajoutant max-width : 100 %, ce problème peut être résolu, en garantissant que les éléments remplissent l'écran sans aucun débordement horizontal.

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!