100vh ist auf Mobile kaputt – moderne CSS-Units sind die Lösung

css new features

Lange Zeit waren vh und vw die Standard-Tools für responsive Layouts. Doch auf mobilen Geräten sorgte besonders 100vh immer wieder für Probleme: Sobald Browser-Toolbars eingeblendet oder ausgeblendet wurden, sprang das Layout oder bekam ungewollte Abstände.

Die neuen Viewport-Units

Mit modernen CSS-Spezifikationen stehen uns jetzt smartere Einheiten zur Verfügung, die genau dieses Problem lösen:

  • svh / svw → Small Viewport (inkl. sichtbarer Toolbars)
  • lvh / lvw → Large Viewport (ohne Toolbars)
  • dvh / dvw → Dynamic Viewport (passt sich beim Ein- und Ausblenden der UI dynamisch an)

Praxis-Tipps

  • Für flexible Fullscreen-Sektionen, die sich automatisch anpassen:
                            .section {
  height: 100dvh;
}

Für stabile Layouts nach dem Scrollen, wenn Toolbars verschwunden sind:Für stabile Layouts nach dem Scrollen, wenn Toolbars verschwunden sind:Für stabile Layouts nach dem Scrollen, wenn Toolbars verschwunden sind:

                            .section {
  height: 100lvh;
}

Unterstützung im Browser

Inzwischen unterstützen rund 95 % aller modernen Browser die neuen Einheiten – inklusive Safari, Chrome und Firefox. Damit sind sie reif für den produktiven Einsatz.

Fazit

100vh gehört in die Vergangenheit. Wer heute zuverlässige, saubere Layouts auf Mobilgeräten bauen möchte, sollte die neuen Viewport-Units (dvh, svh, lvh) einsetzen.

Hast du sie schon ausprobiert? Teile deine Erfahrungen! 🚀

CSS

Back