Pourquoi plusieurs éléments de 100 vw de largeur créent-ils des barres de défilement horizontales ?

Mystère du débordement horizontal 100vw

Dans le domaine du développement Web, l'unité 100vw est couramment utilisée pour définir la largeur des éléments devant occuper le pleine largeur de la fenêtre. Cependant, un problème curieux se pose lorsque plusieurs éléments d'une largeur de 100 vw sont placés consécutivement. Au lieu de remplir l'écran comme prévu, des barres de défilement verticales apparaissent accompagnées d'un défilement horizontal inexplicable.

Pour comprendre ce phénomène, approfondissons le code CSS :

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

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

Avec un seul élément, le div remplit toute la largeur de l'écran sans aucun défilement. Cependant, l'ajout d'un autre div avec la même classe entraîne le problème de défilement susmentionné :

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

Le coupable derrière ce comportement réside dans la nature de 100vw. Bien qu'elle représente 100 % de la largeur de la fenêtre, il s'agit d'une unité fluide qui fluctue en fonction des changements de taille de la fenêtre. Par exemple, si l'utilisateur redimensionne la fenêtre du navigateur plus étroite, les divs rétréciront en conséquence, conservant leur largeur de 100vw.

Avec plusieurs divs utilisant 100vw, lorsque la fenêtre est suffisamment large, il y a suffisamment d'espace pour qu'ils s'adaptent sur les côtés. -à côté. Cependant, lorsque la fenêtre se rétrécit en dessous d'une certaine largeur, les divs ne peuvent plus rétrécir. Au lieu de cela, elles commencent à se chevaucher, créant un débordement horizontal.

Les barres de défilement verticales apparaissent comme une conséquence du chevauchement. Le navigateur introduit des barres de défilement pour permettre aux utilisateurs de faire défiler horizontalement et d'accéder au contenu caché sous les divs qui se chevauchent.

Pour remédier à ce problème, on peut utiliser une propriété max-width sur les divs, limitant leur largeur maximale à 100. % :

.box {
  max-width: 100%;
}

Ce faisant, les divs occuperont toujours toute la largeur de la fenêtre d'affichage tant qu'il y aura suffisamment d'espace. Cependant, lorsque la fenêtre se rétrécit et que les div ne peuvent pas être placés côte à côte, ils rétrécissent et s'empilent verticalement, éliminant à la fois le débordement horizontal et le besoin de défilement 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!