Viewport Units sind CSS-Einheiten, die eine Länge als Prozentanteil des Viewports angeben: 1vw ist ein Prozent seiner Breite, 1vh ein Prozent seiner Höhe. Dazu kommen vmin und vmax, die sich an der jeweils kleineren beziehungsweise größeren Seite orientieren. Eine Prozentangabe wie width: 50% misst am Elternelement, 50vw dagegen immer am sichtbaren Ausschnitt. Damit eignen sich Viewport Units überall dort, wo eine Fläche den Bildschirm füllen soll.
- Viewport Units (vw, vh)
CSS-Einheiten, die Größen als Prozentanteil des Viewports angeben, sodass sie mit dem sichtbaren Bereich mitwachsen.
Beispiel: „Der Hero-Bereich bekommt 100dvh Höhe und füllt damit genau den sichtbaren Ausschnitt.“Auch: Viewport-Einheiten oder viewport-relative Längen. Zur Familie gehören vw, vh, vmin und vmax sowie die Varianten mit den Präfixen sv, lv und dv.
Häufige Fehlverwendung: width: 100vw am Desktop. Die Einheit schließt die Breite der Scrollleiste mit ein, das Element wird dadurch breiter als der Inhaltsbereich und erzeugt eine waagerechte Scrollleiste.
100vh fällt auf dem Telefon zu hoch aus
Mobile Browser blenden ihre Leisten beim Scrollen aus und beim Zurückscrollen wieder ein. vh rechnet dabei mit dem großen Viewport, also mit dem Zustand ohne Leisten. Solange die Adressleiste sichtbar ist, ragt ein Element mit height: 100vh unten darunter. Bei einem Hero-Bereich fällt das kaum auf, bei einem Overlay dagegen sofort: Der Schließen-Button sitzt dann außerhalb des sichtbaren Bereichs.
svh, lvh und dvh treffen die Höhe genauer
Seit 2022 gibt es zu jeder Viewport-Einheit drei Varianten. svh rechnet mit dem kleinen Viewport, also dem Zustand mit ausgefahrenen Browserleisten. lvh rechnet mit dem großen Viewport und verhält sich wie das bisherige vh. dvh (dynamic viewport height) folgt dem aktuellen Zustand und ändert seinen Wert, während die Leisten ein- und ausfahren.
/* Bisher: ragt unter die Browserleiste */
.hero { height: 100vh; }
/* Heute: dvh folgt der Leiste, svh bleibt immer vollständig sichtbar */
.hero { height: 100dvh; }
.overlay { height: 100svh; }Die Varianten stehen seit Safari 15.4, Firefox 101 und Chrome 108 bereit und gelten seit Juni 2025 als Baseline „widely available“. Wir setzen dvh für großflächige Bereiche ein und svh überall dort, wo nichts verdeckt werden darf. Ein Hinweis zu dvh: Weil sich der Wert beim Scrollen ändert, kann das Layout sichtbar springen.
Wofür sich vw sonst lohnt
Schriftgrößen und Abstände lassen sich mit vw stufenlos an die Fensterbreite koppeln. Pur eingesetzt hat das einen Haken: Eine Schriftgröße in reinem vw übergeht die Grundschriftgröße, die jemand im Browser eingestellt hat, und wächst auf sehr breiten Bildschirmen ins Absurde. Die übliche Lösung ist clamp() mit einem rem-Anteil im mittleren Wert, etwa font-size: clamp(1.75rem, 1rem + 2vw, 3rem). Damit bleibt die Größe zwischen Minimum und Maximum und folgt dazwischen dem Viewport.
