Kann CSS die Breite des Ansichtsfensters ohne Bildlaufleisten berechnen?

Ansichtsfensterbreite ohne Bildlaufleisten mit CSS messen

Kann CSS verwendet werden, um die Ansichtsfensterbreite (vw) ohne Einbeziehung der Bildlaufleiste zu berechnen?

Verschiedene Benutzer stellen Diskrepanzen zwischen dem vw-Wert und der tatsächlichen Körperbreite fest, was Bildlaufleisten ausschließt. Während die Bildschirmauflösung beispielsweise 1920 Pixel betragen könnte, gibt das VW 1920 Pixel zurück, obwohl die Körperbreite eher bei 1903 Pixel liegt.

Der Schlüssel liegt im Verständnis, dass 100 % Breite in CSS sowohl das Ansichtsfenster als auch die Bildlaufleiste umfassen. Um die Breite des Ansichtsfensters zu isolieren, kann die folgende Berechnung verwendet werden:

body {
  width: calc(100vw - (100vw - 100%));
}

Diese Berechnung subtrahiert die Breite der Bildlaufleiste von der gesamten Breite des Ansichtsfensters und liefert so effektiv die gewünschte Breite ohne Bildlaufleisten.

Darüber hinaus Diese Technik kann auf Höhenmessungen ausgeweitet werden. Um beispielsweise ein quadratisches Element zu erstellen, das 50 % des Ansichtsfensters einnimmt und dabei die Bildlaufleiste ausschließt, kann der folgende Code verwendet werden:

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}

Das obige ist der detaillierte Inhalt vonKann CSS die Breite des Ansichtsfensters ohne Bildlaufleisten berechnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!