Understanding LVH, SVH and DVH units with CSS

With mobile devices of all sizes being released every year, it has become increasingly complicated to properly address various needs.

If you have already made a site responsive (adapted to screen sizes), you know what I mean! 😁

Fortunately, Dynamic Viewport Units like svh, lvh, and dvh have entered the front-end developer's arsenal to easily create dynamic responsive designs.

• svh (Small Viewport Height) - This means that 1svh corresponds to 1% of the visible area when the browser controls are visible (like the navigation bar)
• lvh (Large Viewport Height) - This means that 1lvh corresponds to 1% of the visible area when the browser controls are hidden
• dvh (Dynamic Viewport Height) - This means that 1dvh corresponds to 1% of the visible viewport height, automatically switching from lvh to svh depending on whether the controls are visible or not

Let's take a detailed look at these units! But first, let's start by understanding what the viewport really is.

What is the Viewport?

The viewport is simply the visible area of a web page in a browser: it's where we see a website load.

In fact, it's not uncommon to use one of these two important units to work with the viewport:

1. vh (Viewport Height)
2. vw (Viewport Width)

These two units allow you to specify that 100vh, for example, corresponds to the entire height of the browser, and thus, we often use it to display an image as soon as a visitor arrives on our website.

.main {
    background-image: url(...);
    background-size: cover;
    height: 100vh;
}

However, with all the new mobile devices, screen sizes have become numerous.

Whether with elements like navigation bars or virtual keyboards, the size of the viewport is no longer the same for everyone.

This is where the svh, lvh, and dvh units can help us.

CSS Units SVH, LVH, and DVH

CSS Unit SVH (Small Viewport Height)

This CSS unit is based on the viewport size when the buttons are visible. In other words, it represents the smallest height that the viewport can reach.

It allows us to avoid surprises by anticipating scenarios where the space is reduced (think of your navigation bar that appears or shrinks when using Safari on iOS 😉).

CSS Unit LVH (Large Viewport Height)

The lvh unit corresponds to the maximum height of the viewport even if buttons might temporarily reduce part of this height: for example, the navigation bar or "full-screen" mode.

It is very useful for setting elements under the assumption that the available size is maximum.

CSS Unit DVH (Dynamic Viewport Height)

There is a small problem with the SVH and LVH units: one allows styling based on whether the buttons are visible (SVH) and the other based on whether the buttons are invisible (LVH).

Therefore, you have to make a choice between:

• creating a design based on the assumption that the buttons are visible
• or creating a design based on the assumption that the buttons are invisible

We would like to create a dynamic design: one that is 100% of the viewport height when the buttons are visible and at the same time 100% of the viewport height when the buttons are invisible.

Obviously, you can use the dvh unit for that.

It's the most flexible of the three. It dynamically represents the entire viewport height:

• If the buttons are displayed - 100dvh = 100% of the visible page height in the viewport
• If the buttons are not displayed - 100dvh = 100% of the visible page height in the viewport minus the size of the buttons

Summary Table between vh, lvh, svh, and dvh

Let's recap the main differences between these 4 CSS measurement units.

And in terms of compatibility, what does it look like?

These CSS units are quite recent, and not all browsers are compatible yet.

You can check at any time which browser can read or cannot read these units on caniuse.

As we can see, the dvh unit is compatible with all browsers except Internet Explorer (which is expected...) and Firefox (which is really very surprising, however).

Conclusion

The lvh, svh, and dvh units are very interesting! They make it easy to control the behavior of elements in responsive designs.

However, be careful because these last ones are not yet very compatible with the most used browsers like Firefox.

You can take a look at our dedicated training on HTML and CSS! It's guaranteed to be the most comprehensive!