Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Kann CSS die Breite des Ansichtsfensters ohne Bildlaufleisten berechnen?

Patricia Arquette
Freigeben: 2024-11-06 22:12:02
Original
328 Leute haben es durchsucht

Can CSS Calculate Viewport Width Without Scrollbars?

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%));
}
Nach dem Login kopieren

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))
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage