svh, lvh en dvh zijn CSS-eenheden voor hoogte die de grootte van een element bepalen op basis van de hoogte van de viewport (het zichtbare gebied van de browser). Ze behoren tot de viewport-eenheden, net als vw (viewport width), maar verschillen in hoe de hoogte wordt berekend. Begrip van deze verschillen is cruciaal voor responsief webdesign, vooral op mobiele apparaten.
vh (viewport height): Oorspronkelijk was vh gedefinieerd als 1% van de initiële viewport hoogte. Op mobiele apparaten kan de gebruikersinterface (UI) van de browser echter van grootte veranderen tijdens het scrollen, wat leidt tot inconsistenties in de hoogteberekening. Momenteel wordt vh meestal berekend op basis van de grootste viewport hoogte, dat wil zeggen wanneer de browser UI minimaal is. Dit kan ervoor zorgen dat inhoud overloopt wanneer de browser UI groter is.
lvh (large viewport height): lvh is gedefinieerd als 1% van de grootste viewport hoogte, vergelijkbaar met hoe vh momenteel werkt. lvh is handig wanneer je wilt dat een element altijd de maximale viewport hoogte heeft, ongeacht de grootte van de browser UI.
svh (small viewport height): svh is gedefinieerd als 1% van de kleinste viewport hoogte, dat wil zeggen wanneer de browser UI maximaal is. svh stelt je in staat elementen te ontwerpen die de schermhoogte vullen, zelfs wanneer de browser UI veel ruimte inneemt. svh voorkomt dat inhoud wordt bedekt door de browser UI.
dvh (dynamic viewport height): dvh is gedefinieerd als 1% van de dynamische viewport hoogte, wat betekent dat de hoogte continu wordt berekend op basis van de huidige viewport hoogte, zelfs wanneer de browser UI verandert. Hoewel dvh ideaal lijkt om inhoud altijd perfect in de viewport te passen, kan de continue verandering van grootte leiden tot schokkerige gebruikerservaringen en prestatieproblemen. Gebruik dvh daarom spaarzaam. Het kan ervoor zorgen dat inhoud springt of abrupt van grootte verandert tijdens het scrollen.
Kortom, svh en lvh bieden een stabielere benadering voor het bepalen van de hoogte op basis van de viewport, terwijl dvh met voorzichtigheid moet worden gebruikt. De juiste keuze hangt af van het ontwerpdoel en de gewenste gebruikerservaring. lvh behoudt zijn grootte, svh krimpt mee met de browser UI, en dvh verandert continu van grootte.
