The New CSS Viewport Units That Finally Fix Mobile Layouts

If you have ever built a full-screen hero section, opened it on your phone, and watched the bottom get swallowed by the browser’s address bar, you are not doing anything wrong. 100vh is broken on mobile by design, and it has been frustrating developers for years. The good news is that CSS now ships a proper fix in the form of three new sets of viewport units. This guide explains exactly what they are, why they exist, and how to use them with real, copy-paste examples. You can see all of these working live in the demo below. Why  100vh  Has Always Been Broken on Mobile On desktop,  100vh  works exactly as you would expect: it gives you 100% of the visible viewport height. On mobile, it lies to you. Mobile browsers like Safari and Chrome have dynamic UI elements, primarily an address bar at the top and sometimes a toolbar at the bottom. These bars slide away as the user scrolls down to give more reading space, then reappear when the user scrolls back up. The problem is that  100vh  is al