Warum erzeugen mehrere Elemente mit einer Breite von 100 vw horizontale Bildlaufleisten?

100vw Horizontal Overflow Mystery

Im Bereich der Webentwicklung wird die 100vw-Einheit häufig verwendet, um die Breite der Elemente festzulegen, die das belegen sollen Volle Ansichtsbreite. Allerdings entsteht ein merkwürdiges Problem, wenn mehrere Elemente mit einer Breite von 100 vw hintereinander platziert werden. Anstatt den Bildschirm wie erwartet auszufüllen, erscheinen vertikale Bildlaufleisten zusammen mit einem unerklärlichen horizontalen Bildlauf.

Um dieses Phänomen zu verstehen, schauen wir uns den CSS-Code genauer an:

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

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

Mit einem einzelnen Element, Das Div füllt die gesamte Bildschirmbreite aus, ohne dass ein Bildlauf erforderlich ist. Das Hinzufügen eines weiteren Divs mit derselben Klasse führt jedoch zu dem oben erwähnten Bildlaufproblem:

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

Der Schuldige hinter diesem Verhalten liegt in der Natur von 100vw. Obwohl es 100 % der Breite des Ansichtsfensters darstellt, handelt es sich um eine fließende Einheit, die mit Änderungen in der Größe des Ansichtsfensters schwankt. Wenn der Benutzer beispielsweise die Größe des Browserfensters schmaler ändert, werden die Divs entsprechend verkleinert und behalten ihre Breite von 100 vw bei.

Bei mehreren Divs mit 100 vw und wenn das Fenster breit genug ist, gibt es ausreichend Platz, damit sie seitlich passen -nebeneinander. Wenn das Fenster jedoch unter eine bestimmte Breite schrumpft, können die Divs nicht weiter verkleinert werden. Stattdessen beginnen sie sich zu überlappen, wodurch ein horizontaler Überlauf entsteht.

Die vertikalen Bildlaufleisten entstehen als Folge der Überlappung. Der Browser führt die Bildlaufleisten ein, damit Benutzer horizontal scrollen und auf den unter den überlappenden Divs verborgenen Inhalt zugreifen können.

Um dieses Problem zu beheben, kann man eine max-width-Eigenschaft auf die Divs anwenden und so deren maximale Breite auf 100 begrenzen %:

.box {
  max-width: 100%;
}

Auf diese Weise nehmen die Divs weiterhin die gesamte Breite des Ansichtsfensters ein, solange ausreichend Platz vorhanden ist. Wenn das Fenster jedoch schmaler wird und die Divs nicht nebeneinander passen, werden sie verkleinert und vertikal gestapelt, wodurch sowohl der horizontale Überlauf als auch die Notwendigkeit eines horizontalen Scrollens entfallen.

Das obige ist der detaillierte Inhalt vonWarum erzeugen mehrere Elemente mit einer Breite von 100 vw horizontale Bildlaufleisten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!