Wie kann ich die Breite des Ansichtsfensters (vw) ohne Bildlaufleisten in CSS bestimmen?

Bestimmen der Ansichtsfensterbreite (vw) unter Ausschluss von Bildlaufleisten mithilfe von CSS

Wie in der Abfrage erwähnt, wird die Ansichtsfensterbreite (vw) ausschließlich ohne Bildlaufleisten berechnet durch CSS kann eine Herausforderung sein. Die herkömmliche VW-Messung umfasst den von Bildlaufleisten belegten Platz.

CSS-Lösung ohne JavaScript

Es gibt jedoch eine Problemumgehung mithilfe der Calc-Funktion in CSS. Indem wir die Differenz zwischen 100 % (Breite des Ansichtsfensters mit Bildlaufleisten) und 100 vw (Breite des Ansichtsfensters ohne Bildlaufleisten) von 100 vw abziehen, eliminieren wir effektiv die Breite der Bildlaufleiste:

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

Beispiel

Wenn beispielsweise die Breite des Ansichtsfensters 1920 Pixel beträgt und die Bildlaufleiste 17 Pixel einnimmt, lautet das Ergebnis:

100vw - (100vw - 100 %) = 1920px - (1920px - 1903px) = 1903px

Fazit

Durch die Verwendung dieses Berechnungsausdrucks ist es möglich, die Breite des Ansichtsfensters ohne Bildlaufleisten zu berechnen und so eine genauere Darstellung des tatsächlich sichtbaren Bereichs zu erhalten.

Das obige ist der detaillierte Inhalt vonWie kann ich die Breite des Ansichtsfensters (vw) ohne Bildlaufleisten in CSS bestimmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!