CSS3: Viewport größen (VH, VW, VMIN, VMAX)

Durch CSS3 stehen Entwicklern neue und nützliche Größeneinheiten zur Verfügung. Unter anderem gibt es die Einheiten VH und VW, welche die Viewport-Größen angeben. Was dies genau bedeutet, möchte ich hier behandeln

Wollte man mit CSS2.1 einen Bereich so hoch oder so breit wie die Fenstergröße machen, musste man in einigen Fällen zu JavaScript oder komplizierten Prozentangaben greifen. Mit CSS3 entfällt dieser Aufwand endlich. Mit den folgenden Einheiten kann man einfach und schnell die Größe des Viewports verwenden.

Einheit Bedeutung / Erklärung
vh Viewport height. Steht für die höhe des Fensters. Z.B. 70vh = 70% des Fensters.
vw Viewport width. Steht für die breite des Fensters. Z.B. 60vw = 60% des Fensters.
vmin Viewport minimum. Wird dem kleineren zugewiesen. Z.B. bei einer Fenstergröße von 1000(w)x500(h) entspricht 100vmin >> 100vh, weil die Höhe geringer ist als die Breite.
vmax Viewport maximum. Wird dem größeren zugewiesen. Z.B. bei einer Fenstergröße von 1000(w)x500(h) entspricht 100vmax >> 100vw, weil die Breite größer ist als die Höhe.


Doch wozu ist das gut?

Will man einen Div-Bereich genau an die Höhe oder Breite des Browserfensters anpassen, kann man das ganz einfach per CSS machen.

div {
    width: 100vh;
    height: 100vh;
}

Um ein Beispiel zu sehen klicke hier.

Browserunterstützung

  • Internet Explorer 9+
  • Firefox 19+
  • Chrome 20+
  • Safari 6+
  • Opera 15+
  • Android Browser 4.4+

82.06% der Internetnutzer haben mit Viewport größen kompatible Browser.