Finally a fix for 100vh on mobile devices

Every developer has likely encountered this challenge at least a few times in their career. Picture this scenario: you’re building a hero component that spans the entire height of the screen and includes a call-to-action button at the bottom. Everything seems perfect on your desktop, but as soon as you switch to your phone, you’re puzzled to find the call-to-action button positioned outside the viewport. How did this happen?

The why

Mobile browsers have retracting toolbars, and the calculation of 100vh represents the viewport height when these toolbars are in their collapsed state, which only occurs after you scroll. That means that when you initially load the page, the value of 100vh will be greater than fits in your screen. Resulting in this ugly behavior.

The fix

Until recently, there were a few workarounds available to address this issue. For instance, one could calculate the value of 100vh and set it as a CSS variable, or use -webkit-fill-available to define the height. However, the era of relying on these hacks has come to an end. We now have two new viewport units at our disposal, which provide a more reliable solution:

These new viewport units introduce a range of CSS units, each with its own prefix. The largest viewport units are denoted by the prefix lv*, while the smallest and dynamic viewport units use sv* and dv*, respectively.

But it doesn’t end with viewport height alone. All three of these units offer variants for *vw, *vmin, *vmax, *vi, and *vb as well!

So, now what is the fix?

With the introduction of these new units, the fix for the issue has become remarkably straightforward. Depending on your requirements, you can now utilize 100dvh, 100lvh, or 100svh.

By using 100dvh, the element will occupy 100% of the height, adjusting accordingly when the toolbars expand or collapse. On the other hand, 100lvh will maintain a height of 100% even with the toolbars expanded, while 100svh will retain a height of 100% when the toolbars are collapsed.