CSS Viewport Units: vh, vw, dvh, and svh
How CSS viewport units work, why 100vh breaks on mobile, and how the new dvh, svh, and lvh units fix the address-bar problem.
7 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
What the classic units mean
vw and vh are percentages of the viewport width and height. 50vw is half the viewport width; 100vh is the full viewport height. They are perfect for hero sections and full-screen layouts - until you hit mobile, where the browser's address bar makes 'the viewport' a moving target.
1vw = 1% of viewport width, 1vh = 1% of viewport height
vmin and vmax track the smaller or larger dimension
Great for full-bleed heroes and fluid spacing
Behave predictably on desktop, less so on mobile
Why 100vh breaks on mobile
On mobile browsers, the address bar shows and hides as you scroll, changing the visible height. Classic 100vh refers to the largest possible viewport, so a full-height section ends up taller than the screen and gets clipped behind the browser chrome. This is one of the most reported mobile layout bugs.
100vh = largest viewport, ignoring the visible address bar
Content can be cut off below the fold on phones
The bug appears only when the address bar is visible
Desktop testing hides it entirely
Use dvh, svh, and lvh - and test them
The dynamic viewport units fix this: svh is the small viewport (address bar shown), lvh is the large viewport (address bar hidden), and dvh updates live as the bar moves. Use dvh for full-height layouts, then verify on real mobile widths with the chrome visible, since the bug only shows there. Sizzy renders accurate mobile viewports so you can confirm the fix without a phone.
dvh updates dynamically as the address bar shows or hides
svh is the smallest viewport, lvh the largest
Prefer dvh for full-screen mobile sections
Test with mobile browser chrome visible to confirm
Release checklist
Replace 100vh with 100dvh for full-height mobile layouts.
Confirm hero sections aren't clipped with the address bar visible.
Use vmin/vmax intentionally, not as a 100vh substitute.
Verify on real mobile widths, not just desktop.
Frequently asked questions
Why does 100vh not work on mobile?
Mobile browsers include the area behind the address bar in 100vh, so a full-height element is taller than the visible screen and gets clipped. Using 100dvh, which updates as the bar shows and hides, resolves the issue.
What is the difference between dvh, svh, and lvh?
svh is the small viewport height (address bar visible), lvh is the large viewport height (address bar hidden), and dvh is the dynamic height that changes as the bar moves. dvh is usually the best default for full-screen layouts.
Are dvh and svh widely supported?
Yes, dynamic viewport units are supported in all current major browsers. For older browsers you can provide a 100vh fallback before the 100dvh declaration so unsupported engines fall back gracefully.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.