Warum verursacht „100vw' manchmal einen unerwarteten horizontalen Überlauf?

100vw verursachen einen unerwarteten horizontalen Überlauf

Wenn Sie einem Element eine Breite von 100vw zuweisen, können Sie davon ausgehen, dass es ohne die Breite des Ansichtsfensters die gesamte Breite einnimmt was zu Überläufen führt. Unter bestimmten Umständen können jedoch trotz der Verwendung von 100vw horizontale Bildlaufleisten angezeigt werden.

Betrachten Sie das folgende Beispiel:

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

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

In diesem Szenario füllt das .box-Element den Bildschirm ohne Bildlaufleisten aus. Wenn Sie jedoch ein zweites .box-Element unter dem ersten hinzufügen:

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

Sie werden das Erscheinen nicht nur vertikaler Bildlaufleisten (erwartet) beobachten, sondern auch einer leichten horizontalen Bildlaufleiste.

Der Grund für dieses Verhalten liegt in der Art und Weise, wie 100vw von Browsern interpretiert wird. Obwohl es „100 % der Breite des Ansichtsfensters“ bedeutet, stellt es den sichtbaren Teil des Ansichtsfensters dar, der nach Berücksichtigung der Dicke der Bildlaufleiste verbleibt. In diesem Fall verringert das Vorhandensein einer vertikalen Bildlaufleiste die verfügbare Breite des Ansichtsfensters, was dazu führen kann, dass das zweite .box-Element horizontal überläuft.

Um dieses Problem zu beheben, können Sie max-width: 100 % verwenden .box-Element:

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

Dadurch wird sichergestellt, dass das Element niemals die wahre Breite des Ansichtsfensters überschreitet, wodurch ein potenzieller horizontaler Überlauf effektiv verhindert wird.

Das obige ist der detaillierte Inhalt vonWarum verursacht „100vw' manchmal einen unerwarteten horizontalen Überlauf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!