Learn These Viewport-Relative CSS Units (100vh, 100dvh, 100lvh, 100svh)

100vh

Over caller years, nan easiest measurement to create a full-screen conception has been to springiness it a tallness of 100vh, assuming its width is adjacent to nan viewport width.   

Current support for vh

On desktop browsers, everything useful arsenic expected.

However, connected mobile browsers, full-screen sections aren’t visible wholly by default. We tin spot them each only arsenic we scroll, erstwhile nan floating reside barroom of nan personification supplier gets shrunk. Note that nan reside bar’s position tin look either connected apical aliases bottom.

This tin lead to a bad personification acquisition if, for example, our sections see vertically centered contented aliases contented for illustration call-to-actions that beryllium astatine its bottommost position and frankincense is initially semi-visible by nan visitors.

To show that behavior, I’ve created a GitHub page that contains a full-screen conception pinch a inheritance image and vertically centered content.

Go up and sojourn that page from your mobile device. You’ll announcement that nan leader image isn’t afloat visible by default.

Thankfully, modern CSS provides immoderate new viewport-relative units pinch awesome browser support (more than 90% astatine nan clip of writing) that thief america lick this rumor without relying connected JavaScript solutions. Their behaviour is nan aforesaid arsenic nan 100vh connected desktop browsers, arsenic location aren’t immoderate move UA interfaces. Their behaviour differs connected mobile devices.

100dvh

The first of these units is nan move viewport tallness portion (dvh).

Here’s its meaning successful nan W3C’s Working Draft document:

The dynamic viewport-percentage units(dv*) are defined pinch respect to nan dynamic viewport size: nan viewport sized pinch move information of immoderate UA interfaces that are dynamically expanded and retracted. This allows authors to size contented specified that it tin precisely fresh wrong nan viewport whether aliases not specified interfaces are present.

The easiest measurement to understand its behaviour is to revisit our page and click on the dvh button to use 100dvh to nan leader section.   

Current support for dvh

What you’ll announcement is that, by default, nan leader conception will look entirely. Then, arsenic you scroll erstwhile nan reside barroom collapses, it updates nan section’s tallness and behaves for illustration 100vh.

Nevertheless, arsenic this portion ever tries to lucifer nan viewport tallness sloppy of nan toolbar’s presence, it causes an instant jump/flash connected nan scroll and frankincense a repositioning connected our centered content—that surely doesn’t make it an perfect replacement for 100vh successful astir cases and tin beryllium disturbing to nan personification and/or costly successful position of performance.  

100lvh

Next, we person nan ample viewport tallness portion (lvh).

Here’s its meaning successful nan W3C’s Working Draft document:

The large viewport-percentage units(lv*) and default viewport-percentage units (v*) are defined pinch respect to nan large viewport size: nan viewport sized assuming immoderate UA interfaces that are dynamically expanded and retracted to beryllium retracted. This allows authors to size contented specified that it is guaranteed to capable nan viewport, noting that specified contented mightiness beryllium hidden down specified interfaces erstwhile they are expanded.

Again, nan easiest measurement to understand its behaviour is to revisit our page and click connected nan lvh button to use 100lvh to nan leader section.   

Current support for lvh

What you’ll announcement is that our conception will behave precisely for illustration erstwhile its tallness is group to 100vh. That said, by default, nan leader conception won’t look entirely, but will do erstwhile nan reside barroom gets shrunk.

In different words, this portion will ever return nan largest, visible viewport tallness that will hap connected nan scroll erstwhile nan toolbar is nan smallest one—that surely doesn’t make it an perfect replacement for 100vh astatine nan clip of this penning arsenic it doesn’t connection thing new.  

100svh

Finally, we person nan mini viewport tallness portion (svh).

Here’s its meaning successful nan W3C’s Working Draft document:

The small viewport-percentage units (sv*) are defined pinch respect to nan small viewport size: nan viewport sized assuming immoderate UA interfaces that are dynamically expanded and retracted to beryllium expanded. This allows authors to size contented specified that it tin fresh wrong nan viewport moreover erstwhile specified interfaces are present, noting that specified contented mightiness not capable nan viewport erstwhile specified interfaces are retracted.

Once again, please analyse its behaviour by revisiting our page and clicking connected nan svh button to use 100svh to nan leader section.   

Current support for svh

What you’ll announcement is that our conception will ever beryllium visible and behave for illustration nan first authorities (before scrolling) of nan 100dvh.

In different words, this portion will ever return nan smallest, visible viewport tallness that will hap erstwhile nan toolbar is expanded—that surely makes it an perfect replacement for 100vh astatine nan clip of this writing.  

Fallback

If you’re satisfied pinch immoderate of nan erstwhile units and want to usage it but astatine nan aforesaid clip request a fallback to nan 100vh portion conscionable to beryllium safer, effort thing for illustration this old-school CSS: 

In this way, non-supported browsers will disregard nan first spot value.

Conclusion

In this tutorial, we discussed nan challenges of making genuinely full-screen sections crossed each devices erstwhile moving pinch different viewport-relative units.

Let’s recap regarding nan behaviour connected mobile browsers:

• Setting 100vh aliases 100lvh to a conception will nutrient nan aforesaid result. The conception will person a fixed tallness (unless we resize nan viewport), but we won’t beryllium capable to spot it wholly unless we scroll and nan reside barroom gets shrunk. 
• Setting 100dvh to a conception intends that it won’t person a fixed tallness but will beryllium recalculated arsenic we scroll. As a consequence of that, elements wrong that conception mightiness beryllium repositioned. Its behaviour tin beryllium useful nether definite scenarios, but mightiness beryllium annoying for nan user.
• Setting 100svh to a conception intends that it’ll ever person a fixed tallness (unless we resize nan viewport) that will beryllium adjacent to nan first viewport tallness (before we scroll)—when nan reside barroom is expanded. The conception will beryllium afloat visible by default conscionable for illustration nan first authorities of 100dvh.  

My recommendation, astatine this moment, is to create full-screen leader sections pinch 100svh and person a fallback to 100vh.  

As always, acknowledgment a batch for reading!