If you’ve done any frontend development in the past 10 years, you probably had an issue while trying to fill the whole screen on iOs. Some of your content may be hidden by the iOs navigation bar. It should be pretty simple to solve since vh was introduced in 2013 and is broadly supported right? No it isn’t, because in iOs 100vh means the full height of the screen even if the OS navigation bar is shown.

Some of your content will be hidden behind that bar and it’s almost never what you want. It’s actually easy now to make sure your content is fullscreen and completely visible at all time. We can achieve this wihout any javascript.

Why is vh not working as intended

Well, it is working as intended right? 100vh is the entire screen of the cellphone and not the actual visible viewport. We’ll see next why that actually makes sense now.

Modern css to the rescue (dvh, lvh, svh)

So as we know, 1vh mean 1% of the screen height even if the viewport size is dynamic. So if we apply height: 100vh to a container and the navbar is shown, the viewport size will be smaller and some of container will be hidden behind the navbar.

Dynamic Viewport Units dvh

Now since 2022, we have access to the dvh unit. So 1dvh is 1% of the actual visible viewport height (total screen minus the navigation bar). You can make sure your content will always be visible now with 100dvh no matter if the navbar is visible or not.

The only issue is that unit is only supported in Safari 16.4 and newer versions. If you still have to support older versions it’s a problem. The way I adress this is to check if the current user agent supports dvh.

@supports not (height: 100dvh) {
	height: 100vh;
}

I don’t care if some content is hidden on older version of iOs so that works for me. The user experience is still good and most of the content is still visible without scrolling.

Small Viewport Units svh

You can also use the lowest viewport size so your fullscreen content won’t resize when the viewport height change. This also makes sure that your content will always be visible.

Large Viewport Units lvh

As of now, this is exactly the same as vh.

Here we go

With these new viewport units you will never struggle with the full height hidden content issue on iOs again and your content will always be visible.