Heim > Web-Frontend > CSS-Tutorial > Wie berechnet man die Breite des Ansichtsfensters (vw) ohne die Bildlaufleiste in CSS?

Wie berechnet man die Breite des Ansichtsfensters (vw) ohne die Bildlaufleiste in CSS?

Linda Hamilton
Freigeben: 2024-11-06 03:13:02
Original
366 Leute haben es durchsucht

How to Calculate Viewport Width (vw) Excluding the Scrollbar in CSS?

Berechnung der Ansichtsfensterbreite (vw) ohne Bildlaufleiste in CSS

Wie in der ursprünglichen Frage erwähnt, wird die Ansichtsfensterbreite (vw) ohne Berücksichtigung ermittelt denn die Bildlaufleiste allein mit CSS kann eine Herausforderung sein. Es gibt jedoch eine Problemumgehung mit der Funktion calc(), die dies erreichen kann.

In calc() stellt 100 % die Breite des Ansichtsfensters einschließlich der Bildlaufleiste dar. Durch Subtrahieren der Differenz zwischen 100 % und 100 vw können Sie die Breite der Bildlaufleiste effektiv ignorieren:

<code class="css">body {
  width: calc(100vw - (100vw - 100%));
}</code>
Nach dem Login kopieren

Dieser Ausdruck weist dem Körperelement eine Breite zu, die dem vw minus der Breite der Bildlaufleiste entspricht.

Darüber hinaus kann dieser Ansatz auf jedes Element angewendet werden, nicht nur auf direkte Kinder des Körpers. Um beispielsweise ein Quadrat zu erstellen, das 50 % des Ansichtsfensters einnimmt und dabei die Breite der Bildlaufleiste ausschließt:

<code class="css">.box {
  width: calc(50vw - ((100vw - 100%) / 2));
  height: 0;
  padding-bottom: calc(50vw - ((100vw - 100%) / 2));
}</code>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie berechnet man die Breite des Ansichtsfensters (vw) ohne die Bildlaufleiste in CSS?. 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