Warum führt die Verwendung von 100vw zu einem horizontalen Überlauf bei mehreren Elementen?

Grundlegendes zum horizontalen Überlauf, der durch 100vw verursacht wird

Bei der Verwendung von 100vw zum Definieren der Breite von Elementen können Entwickler auf einen unerwarteten horizontalen Überlauf stoßen, wenn mehrere solcher Elemente vorhanden sind. Während 100vw „100 % der Breite des Ansichtsfensters“ bedeuten soll, können bestimmte Szenarien zu diesem Verhalten führen.

Beachten Sie den folgenden Code:

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

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

Dieser Code führt zu einem einzigen Element, das den gesamten Bildschirm ohne Bildlaufleisten ausfüllt. Wenn jedoch ein zweites Element hinzugefügt wird:

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

Das Ergebnis sind nicht nur vertikale Bildlaufleisten (wie erwartet), sondern auch ein leichter horizontaler Bildlauf. Warum passiert das?

Der Grund liegt im Vorhandensein vertikaler Bildlaufleisten. Wenn der Inhalt der div-Elemente deren Höhe überschreitet, werden vertikale Bildlaufleisten angezeigt. Dadurch wird der verfügbare horizontale Platz für die Elemente verringert, was dazu führt, dass sie horizontal überlaufen.

Um dieses Problem zu beheben, kann man max-width: 100% hinzufügen; zur Box-Klasse:

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

Durch die Begrenzung der maximalen Breite des Elements auf 100 % wird der horizontale Überlauf verhindert, selbst wenn vertikale Bildlaufleisten vorhanden sind.

Das obige ist der detaillierte Inhalt vonWarum führt die Verwendung von 100vw zu einem horizontalen Überlauf bei mehreren Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!