CSS-Einheiten - Was ist der Unterschied zwischen vh / vw und%?

136

Ich habe gerade etwas über eine neue und ungewöhnliche CSS-Einheit gelernt. vhund vwmessen Sie den Prozentsatz der Höhe und Breite des Ansichtsfensters.

Ich habe mir diese Frage von Stack Overflow angesehen, aber dadurch sahen die Einheiten noch ähnlicher aus.

Wie funktioniert vw und vh unit?

Die Antwort sagt ausdrücklich

vw und vh sind ein Prozentsatz der Fensterbreite bzw. -höhe: 100vw sind 100% der Breite, 80vw sind 80% usw.

Dies scheint genau das gleiche zu sein wie die %Einheit, die üblicher ist.

In den Entwicklertools habe ich versucht, die Werte von vw / vh in% und umgekehrt zu ändern, und das gleiche Ergebnis erzielt.

Gibt es einen Unterschied zwischen den beiden? Wenn nicht, warum wurden diese neuen Einheiten eingeführt CSS3?

css viewport-units

— Richard Hamilton
quelle

7

Vw / vh entfernt die Abhängigkeit von einem übergeordneten Element und ermöglicht die Größenanpassung basierend auf der Größe des Ansichtsfensters.

— Aufkleber

2

Fellow Leser, IanC Antwort speichern Sie den Tag gut könnte, sicher sein , es zu überprüfen.

— Skippy le Grand Gourou

166

100%kann 100%von der Höhe von allem sein. Wenn ich beispielsweise ein Elternteil habe div, das 1000pxgroß ist, und ein Kind div, das sich in der 100%Höhe befindet, kann dieses Kind divtheoretisch viel größer als die Höhe des Ansichtsfensters oder viel kleiner als die Höhe des Ansichtsfensters sein, obwohl dies auf diveingestellt ist 100%Höhe .

Wenn ich stattdessen das untergeordnete divElement auf setze 100vh, wird nur 100%die Höhe des Ansichtsfensters und nicht unbedingt das übergeordnete Element ausgefüllt div.

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>

Erweitern Sie das Snippet

— Josh Beam
quelle

Ich hatte eine Seitenleiste, die in einer Bootstrap- "Zeile" verschachtelt war, und konnte die volle Seitengröße auch nach dem Einstellen der Höhe nicht erreichen: 100%. Was für mich funktionierte war 100vh

— raghav710

27

Ich weiß, dass die Frage sehr alt ist und @Josh Beam den größten Unterschied angesprochen hat, aber es gibt noch einen anderen:

Angenommen, Sie haben ein <div>direktes Kind, von <body>dem Sie das gesamte Ansichtsfenster ausfüllen möchten width: 100vw; height: 100vh;. Es funktioniert genauso, width: 100%; height: 100vh;bis Sie mehr Inhalt hinzufügen und eine vertikale Bildlaufleiste angezeigt wird. Da das vwKonto für die Bildlaufleiste als Teil des Ansichtsfensters width: 100vw;etwas größer sein wird als width: 100%;. Dieser kleine Unterschied führt dazu, dass eine horizontale Bildlaufleiste hinzugefügt wird (damit der Benutzer diese kleine zusätzliche Breite sehen kann), und folglich wäre die Höhe in beiden Fällen auch etwas anders.

Dies muss bei der Entscheidung, welches verwendet werden soll, berücksichtigt werden, auch wenn die Größe des übergeordneten Elements mit der Größe des Dokumentansichtsfensters übereinstimmt.

Beispiel:

Verwenden von width:100vw;:

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Erweitern Sie das Snippet

Verwenden von width:100%;:

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

Erweitern Sie das Snippet

— IanC
quelle

2

Das CSS body { overflow: hidden }führt dazu, dass die Bildlaufleisten nicht angezeigt werden.

— Dave F

2

Vielen Dank für Ihre Antwort und Ihr Codebeispiel @IanC. Es hat mir sehr geholfen. Eine Klarstellung: Ich glaube, Sie haben "Bildlaufleiste" gemeint, als Sie "Seitenleiste" geschrieben haben.

Hier sind einige verwandte Diskussionen über Ansichtsfenstereinheiten, die Bildlaufleisten zählen, die ich ebenfalls hilfreich fand:

Die W3C-Spezifikation für die Einheiten vw, vh, vmin, vmax (die "prozentualen Längen des Ansichtsfensters") besagt, dass "keine Bildlaufleisten vorhanden sind".

Anscheinend subtrahiert Firefox die Breite der Bildlaufleiste von 100 VW, wie @ Nolonars Kommentar unter Unterschied zwischen Breite: 100% und Breite: 100 Vw? beobachtet unter Berufung auf "Kann ich verwenden".

Kann ich verwenden , möglicherweise in Spannung mit der Spezifikation (?), Sagt, dass alle Browser außer Firefox derzeit "falsch" 100vw als die gesamte Seitenbreite einschließlich der vertikalen Bildlaufleiste betrachten.

— Slack Undertow
quelle

1

Die Einheiten vw (Ansichtsbreite) und vh (Ansichtshöhe) sind relativ zur Größe des Ansichtsfensters, wobei 100vw oder vh 100% der Breite / Höhe des Ansichtsfensters sind.

Wenn ein Ansichtsfenster beispielsweise 1600 Pixel breit ist und Sie 2vw angeben, entspricht dies 2% der Breite des Ansichtsfensters oder 32 Pixel.

% unit basiert immer auf der übergeordneten Elementbreite des aktuellen Elements

0

Es gibt einen Unterschied, der nicht unbedingt angesprochen wurde. 100vw enthält die Breite der Scrool-Leiste, während 100% diese nicht enthält. Es ist ein kleiner Unterschied, aber wichtig beim Design.

1

IanCs Antwort tut es. "Da das vw die Bildlaufleiste als Teil des Ansichtsfensters berücksichtigt, ist width: 100vw; etwas größer als width: 100%;"

— j08691