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

Berechnung der Ansichtsfensterbreite (vw) ohne Bildlaufleiste nur in CSS

Es stellt sich die Frage: Kann CSS allein die vw ohne Bildlaufleisten bestimmen? Stellen Sie sich einen Bildschirm mit einer Breite von 1920 Pixeln vor, wobei vw 1920 Pixel zurückgibt. Die tatsächliche Körperbreite beträgt jedoch ungefähr 1903 Pixel.

Um diese Diskrepanz zu beheben, verwenden Sie die CSS-Funktion calc(). Durch die Berechnung von 100vw minus (100vw – 100 %) stellt der resultierende Wert den vw ohne die Breite der Bildlaufleiste dar.

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

Zusätzlich kann diese Technik auf Höhenberechnungen angewendet werden. Um beispielsweise ein Quadrat zu erstellen, das 50 % der Breite des Ansichtsfensters minus 50 % der Breite der Bildlaufleiste einnimmt:

<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 Bildlaufleiste in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!