Stop Using the vh Unit in CSS: Use svh, lvh, and dvh

#webdev #css #programming

vh stands for viewport height. It’s a pretty straightforward unit — 100vh means 100% of the viewport’s height. So if you set an element to height: 100vh, it’s supposed to fill the entire screen height, right?

The problem is, especially on mobile browsers, 100vh often isn’t accurate. Why? Because the height of the viewport can change depending on whether the browser UI — like the address bar or system navigation — is visible or not. So 100vh might refer to the height with the address bar, without it, or something in between — depending on user interaction and context.

This can lead to all kinds of layout issues: content getting cut off, unwanted scrollbars, or weird empty space at the bottom. That’s why, even though vh has been around for a long time and is simple to use, it’s no longer reliable enough for handling modern mobile layout edge cases.

New Units: `svh`, `lvh`, and `dvh`

Now that we’ve seen how vh can be unreliable — especially on mobile devices where the system UI (like address bars or navigation bars) can appear or disappear — CSS introduced three new viewport height units to give us more precise control:

svh – Small Viewport Height
lvh – Large Viewport Height
dvh – Dynamic Viewport Height

These units were first proposed in the CSS Values and Units Module Level 4 and have been actively discussed since around 2022. The goal is clear: to solve the long-standing issues of 100vh behaving inconsistently on devices with dynamic viewports — like smartphones, where the browser UI may slide in or out depending on user interaction.

Visualizing the Difference

To make this clearer, here’s an illustration showing the difference between svh and lvh:

On the left is lvh: the viewport height after the address bar collapses.
On the right is svh: the viewport height while the address bar is still visible.

dvh, on the other hand, adapts between both states — showing the actual, live viewport height as it changes.

So if you set height: 100dvh, your element will adjust as the user scrolls and the browser UI appears or disappears — making your layout feel more responsive and native, especially on mobile.

Here’s a quick summary:

Unit	When to use it
`svh`	When the browser UI is visible, and you want to avoid layout cutoff
`lvh`	When the browser UI is hidden, and you want a true fullscreen layout
`dvh`	When you want the layout to respond dynamically to viewport changes
`vh`	Still usable as a fallback, but not recommended as the default on mobile