DEV Community

Bridget Amana
Bridget Amana Subscriber

Posted on

Understanding why 100vh behaves differently on mobile

#webdev #frontend #tutorial

The expected behavior of 100vh is simple. When you apply it to an element, it should take up the full visible height of the screen so no scrolling is required. This works perfectly on desktop. On mobile browsers, especially Chrome and Safari, the behavior is different. The bottom part of the page sits behind the browser interface, so the content appears cut off unless you scroll. This article focuses on understanding why this happens and how to fix it.

The problem

100vh has always been the quick way to create a full height layout. The issue is that mobile browsers do not calculate 100vh using the actual visible space. The browser address bar and tab bar are not included in that calculation. When those bars expand or collapse, the visual viewport changes, but 100vh does not adjust.

Here is a simple example.

<div class="app-shell">
  <header>
    <h1>My App</h1>
  </header>
  <main>
    <p>This is the main content area.</p>
  </main>
  <footer>
    <p>Footer content here.</p>
  </footer>
</div>
Enter fullscreen mode Exit fullscreen mode 
.app-shell {   
  display: flex;     
  flex-direction: column;     
  min-height: 100vh; 
}  

main {     
  flex: 1; 
}
Enter fullscreen mode Exit fullscreen mode

On mobile, part of the layout will sit behind the browser bar. When you scroll, the bar collapses and the layout suddenly fits. This is the inconsistency developers run into.

A demo of 100vh issue

Many older articles suggest using webkit-fill-available. This used to work in certain contexts but is unreliable today and does not solve the root issue.

100dvh as the fix

A more accurate way to handle full height layouts on mobile is to use the new dynamic viewport unit: dvh.

Dvh stands for dynamic viewport height. It is one of three new viewport units (svh, lvh, dvh). The dynamic version adjusts based on the current visible viewport. If the browser address bar collapses or expands, dvh updates in real time.

Using our earlier example, the fix looks like this:

.app-shell {     
  display: flex;     
  flex-direction: column;     
  min-height: 100vh;     
  min-height: 100dvh; 
}
Enter fullscreen mode Exit fullscreen mode

100dvh Fix

Setting the height to 100dvh tells the browser to size the element using the actual visible viewport height. This prevents the layout from slipping behind the browser UI on mobile.

Conclusion

Dvh provides a practical and reliable fix for the long standing 100vh issue on mobile browsers. It responds to changes in the viewport and keeps your layout visible without relying on outdated workarounds. While browser behavior may continue to evolve, dvh is currently the most accurate way to create full height layouts on mobile.

Top comments (0)