Wie berechnet man die Breite des Ansichtsfensters (vw) ohne die Bildlaufleiste 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>

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>

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!