Fix “Full Height” on mobile

Fix
March 28, 2026 | Read time: 4 minutes

Build Your Own Profitable Community

Stop fighting algorithms and start building a home for your audience. Skool combines courses, community, and gamification into one seamless experience.

▪️Host Everything: Discussion, classroom, and calendar in one place.
▪️Drive Engagement: Built-in leaderboards and rewards keep members active.
▪️Simple Setup: Launch your community in minutes, not days.

Start your 14-day free trial on Skool.com

Sponsor this newsletter to reach 9,000+ active developers

Hey everyone,

We’ve all had to deal with the 100vh bug on mobile. You set your hero section to fill the screen, but then the browser’s address bar pops up and covers the bottom 10% of your content.

It’s frustrating for users and a mess to fix with JavaScript. The browser finally added a native fix.

The Modern Way: svh (Small Viewport Height)

CSS now has dynamic viewport units. While vh is still static, the new svh unit automatically accounts for the browser’s UI elements like the address bar and navigation buttons.

                            
.hero {
  height: 100svh;
}

Why this is a win:

  • No “Hidden” Buttons: Your content will always stay within the visible area, even when the address bar is expanded.
  • No JavaScript Hacks: You can stop using window.innerHeight listeners to resize your containers.
  • Predictable Layouts: svh gives you the “smallest possible” viewport, ensuring your critical UI is never cut off.

The Viewport Family:

  • svh (Small): The viewport height when UI elements (like the address bar) are shown.
  • lvh (Large): The viewport height when UI elements are hidden.
  • dvh (Dynamic): A unit that scales automatically as the user scrolls and the UI expands/contracts.

Browser Support

This is a Baseline feature supported in all modern browsers since late 2022/2023.

Happy coding!

Marko