DEV Community

bing
bing

Posted on

The "100% Height" Lie: How dvh Finally Saved My Short-Video web App 📱

We’ve all been there. You’re building a sleek, TikTok-style short video app. You want that perfect full-screen experience where the video fills the viewport exactly—no scrolling, no gaps.
Before:

After:

Visit the demo 📱 Short-Video web App

I recently went through this struggle, and the "standard" solutions just weren't cutting it. Here is how I finally fixed it.

❌ The "Old" Ways That Failed

  1. The CSS 100% Approach I started with the basics. I set every parent container to full height: 
html, body {
  height: 100%;
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

The Result: On mobile Safari and Chrome, the address bar overlaps the bottom of the app. Your "Bottom Navigation" basically disappears behind the browser's UI.

  1. The JavaScript "Hack" Next, I tried to be smart and use JS to calculate the window height: 
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
Enter fullscreen mode Exit fullscreen mode

The Result: It worked okay, but it felt jittery when the address bar expanded or retracted during scrolls. Plus, it’s a lot of extra code for something that should be simple.

âś… The "Magic" Solution: Dynamic Viewport Units
After banging my head against the wall, I found the modern CSS answer. It turns out I was fighting a losing battle against the browser's UI because I wasn't using Dynamic Viewport Units.

The fix that actually worked perfectly:

.app-container {
  /* Fallback for older browsers */
  height: 100vh; 

  /* The Real Hero */
  height: 100dvh; 
}
Enter fullscreen mode Exit fullscreen mode


Why 100dvh is the GOAT:
vh (Viewport Height): Is static. It doesn't care if the address bar is showing or not, which usually leads to your content being cut off.

dvh (Dynamic Viewport Height): It automatically adjusts as the browser UI elements (like the URL bar) appear or disappear.

Top comments (0)