Dynamische Viewport-Einheiten in CSS verstehen

Wenn Sie jemals ein Vollbild-Layout auf Mobilgeräten erstellt haben und festgestellt haben, dass Inhalte hinter der Adressleiste des Browsers abgeschnitten werden, sind Sie auf das klassische 100vh-Problem gestoßen. Früher erforderte die Lösung JavaScript-Workarounds. Jetzt behandelt CSS dies nativ mit modernen Viewport-Einheiten: svh, lvh und dvh.

Warum vh auf Mobilgeräten versagt

Auf dem Desktop funktioniert vh zuverlässig. Auf Mobilgeräten expandiert und kollabiert die Browser-UI – Adressleiste, Tab-Leiste, Navigationssteuerung – während Benutzer scrollen. Die Viewport-Höhe ändert sich, aber vh folgt ihr nicht.

vh spiegelt den großen Viewport wider (ähnlich wie lvh), der davon ausgeht, dass die Browser-Chrome vollständig eingezogen ist. Wenn also die Adressleiste sichtbar ist, kann ein 100vh-Element den sichtbaren Bereich überlaufen. Inhalte werden abgeschnitten, Schaltflächen werden unerreichbar und Layouts brechen zusammen.

Die drei Viewport-Zustände: Groß, Klein und Dynamisch

Die CSS Values and Units Spezifikation definiert drei unterschiedliche Viewport-Zustände, um dies zu adressieren:

• Großer Viewport – gemessen, wenn alle Browser-UI eingezogen ist (maximal verfügbare Höhe)
• Kleiner Viewport – gemessen, wenn alle Browser-UI expandiert ist (minimal verfügbare Höhe)
• Dynamischer Viewport – verfolgt den jeweils aktuell aktiven Zustand

Jeder Zustand hat einen entsprechenden Satz von CSS-Einheiten:

Jede Familie umfasst auch min-, max-, inline- und block-Varianten (dvi, dvb, svmin, lvmax, etc.).

Wichtig: vh wird in modernen Browsern effektiv auf lvh abgebildet. Beide spiegeln die Größe des großen Viewports wider.

Auf Desktop-Browsern ohne dynamische UI sind alle drei Viewport-Größen identisch.

Wann svh, lvh und dvh verwendet werden sollten

Verwenden Sie svh, wenn Inhalte beim initialen Laden der Seite vollständig sichtbar bleiben müssen, bevor gescrollt wird. Es garantiert, dass Ihr Layout in den kleinstmöglichen Viewport passt – Browser-Chrome vollständig sichtbar.

/* Inhalt beim Laden immer sichtbar, kein Scrollen erforderlich */
.above-the-fold {
  min-height: 100svh;
}

Verwenden Sie lvh für immersive Vollbild-Erlebnisse – Spiele, Splash-Screens oder App-Shells – bei denen Sie den maximal verfügbaren Platz ausfüllen möchten.

/* Füllt den Bildschirm, wenn Browser-Chrome ausgeblendet ist */
.fullscreen-app {
  height: 100lvh;
}

Verwenden Sie dvh, wenn sich das Layout an Änderungen der Browser-UI anpassen soll. Es ist die praktischste Wahl für die meisten responsiven Layouts.

/* Problematisch auf Mobilgeräten */
.hero { height: 100vh; }

/* Passt sich an Änderungen der Browser-Chrome an */
.hero {
  height: 100vh;   /* Fallback für ältere Browser */
  height: 100dvh;  /* Moderne Browser verwenden dies */
}

Das obige Fallback-Muster funktioniert, weil Browser, die dvh nicht erkennen, die zweite Deklaration ignorieren und die erste anwenden. Moderne Browser wenden die letzte gültige Deklaration an, sodass 100dvh wirksam wird.

Der Vorbehalt bei virtuellen Tastaturen

dvh behandelt die Größenänderung der Adressleiste, aber nicht virtuelle Tastaturen. Wenn ein Benutzer auf ein Eingabefeld tippt und die Bildschirmtastatur erscheint, passen sich Viewport-Einheiten normalerweise nicht an, da die meisten Browser standardmäßig nur den visuellen Viewport in der Größe ändern.

Um ein tastaturabhängiges Layout-Verhalten zu aktivieren, können Sie das interactive-widget-Meta-Tag verwenden:

<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">

Der Wert resizes-content teilt dem Browser mit, den Viewport zu verkleinern, wenn die virtuelle Tastatur geöffnet wird. Andere Werte sind resizes-visual (die Standardeinstellung, die nur den visuellen Viewport verkleinert) und overlays-content (die Tastatur überlagert, ohne etwas zu verkleinern). Unterstützung für dieses Verhalten existiert derzeit hauptsächlich in Chromium-basierten Browsern.

Chrome bietet auch programmatische Kontrolle über die VirtualKeyboard API. Die browserübergreifende Unterstützung für diese API bleibt begrenzt. Wenn Ihr Layout also vom sichtbaren Platz unterhalb einer Eingabe abhängt, testen Sie sorgfältig auf echten Geräten.

Browser-Unterstützung

svh, lvh und dvh werden unterstützt in:

• Chrome 108+
• Safari 15.4+
• Firefox 101+

Die Abdeckung ist solide über moderne Browser hinweg. Das oben gezeigte height: 100vh-Fallback-Muster behandelt ältere Umgebungen elegant. Sie können auch die aktuelle Kompatibilität in der MDN-Dokumentation zu Viewport-Einheiten überprüfen.

Die richtige Einheit wählen

• Inhalt muss beim initialen Laden passen? → svh
• Immersives Vollbild-Layout? → lvh
• Adaptives Layout, das auf Browser-UI reagiert? → dvh
• Unterstützung älterer Browser? → Fügen Sie immer ein vh-Fallback hinzu

Fazit

Das Problem der mobilen Viewport-Höhe in CSS hat jetzt eine saubere, native Lösung. Tauschen Sie vh in den meisten Fällen gegen dvh aus, verwenden Sie svh, wenn Above-the-Fold-Sichtbarkeit wichtig ist, und reservieren Sie lvh für Vollbild-Erlebnisse. Kombinieren Sie neuere Einheiten immer mit einem vh-Fallback für Abwärtskompatibilität und denken Sie daran, dass virtuelle Tastaturen eine separate Behandlung erfordern. Kein JavaScript erforderlich.

Häufig gestellte Fragen

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.