How to Fix the Mobile 100vh Bug and Achieve True Full‑Screen Layouts

1. 100vh Bug

The 100vh unit equals 1% of the viewport height, which works on desktop, but on mobile browsers the viewport height changes when the address bar shows or hides, causing 100vh to become a static value that does not reflect the visible area.

When the address bar is visible, the bottom of a full‑screen element is cut off, defeating the purpose of 100vh.

2. Conventional Fixes

2.1 CSS + JavaScript

This method uses a CSS custom property (--vh) that represents 1% of the current window height and updates it on the

resize

event.

<code>// Get viewport height and multiply by 1% to get a value for 1vh
let vh = window.innerHeight * 0.01;
// Set the custom property on the root element
document.documentElement.style.setProperty('--vh', `${vh}px`);
// Update on resize
window.addEventListener('resize', () => {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});</code>

Then use

height: calc(var(--vh) * 100);

in CSS.

<code>.module {
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}
.module__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20%;
}
.module__item:nth-child(odd) { background-color: #fff; color: #F73859; }
.module__item:nth-child(even) { background-color: #F73859; color: #F1D08A; }</code>

2.2 Using -webkit-fill-available

<code>.my-page {
  background-color: #ffffff;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow-y: scroll;
  padding-bottom: 50px;
}</code>

This works in most browsers but can cause issues in some Chrome versions.

2.3 postcss-100vh-fix

A third‑party PostCSS plugin that rewrites 100vh to a safe value for Chrome, Safari, iOS, and other browsers without needing JavaScript.

<code>body { height: 100vh; }
@supports (-webkit-touch-callout: none) {
  body { height: -webkit-fill-available; }
}</code>

3. Better Solution with Dynamic Viewport Units

According to the CSS Values Level 4 specification, the

dvh

unit always reflects the dynamic viewport height, solving the problem with a single line of CSS.

<code>.my-page { height: 100dvh; }</code>

Other dynamic units such as

dvw

,

dvi

,

dvb

,

dvmin

, and

dvmax

are also available.

4. Conclusion

CSS continues to evolve, providing powerful tools for front‑end developers. The new

dvh

unit is the most reliable way to create full‑height sections that adapt to mobile viewport changes, making layout work simpler and more robust.