svh, lvh und dvh sind CSS-Einheiten für die Höhe, die die Größe eines Elements basierend auf der Höhe des Viewports (des sichtbaren Bereichs des Browsers) definieren. Sie gehören zur Gruppe der Viewport-Einheiten, zusammen mit vw (Viewport-Breite), unterscheiden sich aber in der Berechnung der Höhe. Das Verständnis ihrer Unterschiede ist entscheidend für responsives Webdesign, insbesondere auf Mobilgeräten.
vh (Viewport Height): Ursprünglich wurde vh als 1% der ursprünglichen Viewport-Höhe definiert. Auf Mobilgeräten kann sich die Benutzeroberfläche (UI) des Browsers jedoch beim Scrollen in der Größe ändern, was zu Inkonsistenzen bei der Höhenberechnung führt. Aktuell wird vh oft basierend auf der größten Viewport-Höhe berechnet, d.h. wenn die Browser-UI minimal ist. Dies kann dazu führen, dass Inhalt über den Bildschirm hinausragt, wenn die Browser-UI größer ist.
lvh (Large Viewport Height): lvh ist als 1% der größten Viewport-Höhe definiert, ähnlich wie vh aktuell funktioniert. lvh ist nützlich, wenn ein Element immer die maximale Viewport-Höhe haben soll, unabhängig von der Größe der Browser-UI.
svh (Small Viewport Height): svh ist als 1% der kleinsten Viewport-Höhe definiert, d.h. wenn die Browser-UI maximal ist. svh ermöglicht es, Elemente so zu gestalten, dass sie den Bildschirm auch dann ausfüllen, wenn die Browser-UI viel Platz einnimmt. Die Verwendung von svh verhindert, dass Inhalte von der Browser-UI verdeckt werden.
dvh (Dynamic Viewport Height): dvh ist als 1% der dynamischen Viewport-Höhe definiert, d.h. die Höhe wird kontinuierlich basierend auf der aktuellen Viewport-Größe berechnet, auch wenn sich die Browser-UI ändert. Obwohl dvh ideal erscheint, um Inhalte immer an den Viewport anzupassen, kann die ständige Größenänderung zu einem ruckeligen Benutzererlebnis und Leistungseinbußen führen. Daher sollte die Verwendung von dvh auf das Notwendige beschränkt werden. Es kann dazu führen, dass Inhalte beim Scrollen springen oder ihre Größe plötzlich ändern.
Zusammenfassend bieten svh und lvh einen stabileren Ansatz zur viewportbasierten Höhenbestimmung, während dvh mit Vorsicht verwendet werden sollte. Die Wahl der richtigen Einheit hängt vom Designziel und dem gewünschten Benutzererlebnis ab. lvh behält die Größe bei, svh schrumpft mit der Browser-UI und dvh ändert die Größe kontinuierlich.
