100vh height when address bar is shown - Chrome Mobile

Grasping the problem of viewport height

Mobile browsers like Chrome display the address bar and often hide it while the user scrolls, affecting the 100vh value. Unlike desktop browsers where 100vh corresponds to the complete visible height of the screen, on mobile browsers it includes the space beneath the dynamic address bar, making it unpredictable.

Unleashing the power of CSS and JavaScript

Vital Tools for your superhero toolbox:

1. CSS calc(): Dynamic height calculation.
2. Custom properties (--vh): To relegate the dynamic viewport modifications to your CSS.
3. JavaScript listeners: resize or orientationchange events, to keep us sharp.

Here's your superhero script:

// The magical CSS scroll: Makes you match 100% height of the viewport 
function setViewportProperty() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// The guardian angel: Ensures you stay tall
window.addEventListener('resize', setViewportProperty);

// Release the Kraken!
setViewportProperty();


Now it's time for some magnificient CSS magic:

.element {
  min-height: calc(var(--vh, 1vh) * 100);
}


Your content height will resize gracefully when the address bar pays you a surprise visit or decides to go on a vacation.

Addressing the issue of cross-browser compatibility

Safari mobile considerations

In Safari on iOS, the 100vh value is inclusive of the address bar, meaning 100vh actually refers to a space larger than the visible screen size. Employing height: 100% for your container ensures that your html and body tags are also pinned at 100% height. Get your fallback ready with -webkit-fill-available:

.element {
  height: 100vh; /* My old trusty fallback */
  height: -webkit-fill-available; /* Special Safari love */
}


Tweaking those height units

Venture with different viewport units

Take a leap with different viewport units. Know that 100vh can sound the alarm when the URL bar decides to resize. On the other hand, 100% requires strict inheritance from html and body elements. Unanimously accepted alternatives like 100dvh are still at the negotiation table.

Using the VisualViewport API

The superheroes at Chrome Developers are already working tirelessly on these discrepancies with the VisualViewport API. This magic potion provides more control over the viewport size, accommodating all annoying instabilities like soft keyboards and dynamic address bars for an improved mobile experience.

Extra pointers and common pitfalls

Embracing landscape mode

The address bar might behave unexpectedly when transitioning to landscape mode. Ensure your design stands undeterred in both scenarios, and consider using media queries for specific layout changes.

Notch-aware design

In the era of notched devices, precaution must be taken for the content not to be obscured. Use the env() and constant() functions in CSS to be in the safe area.

Maneuvering around browser updates

Browser updates are notorious for changing stuff around. Keep yourself updated about the latest changes and improvements by following developer forums and official documentation.