CSS Viewport Units: 100vh, 100dvh, svh, and lvh
Learn what 1vh and 100dvh mean, compare small and dynamic viewport heights, and use copyable CSS patterns for mobile heroes and scrollable app layouts.
6 min read - Updated 2026-09-05
1vh is one percent of the viewport height, and 100vh is one full viewport height. On mobile, that does not always mean the currently visible area: browser toolbars can cover part of the page. Choose svh for a stable height that fits with toolbars shown, or dvh when the layout should follow the changing viewport.
Viewport units at a glance
Viewport units describe a percentage, not a fixed pixel size. If the relevant viewport height is 800 CSS pixels, 1vh is 8 CSS pixels and 100vh is 800 CSS pixels. Device pixel ratio does not change that CSS-pixel calculation.
| Unit | Reference | Typical use |
|---|---|---|
| 1vw / 1vh | 1% of viewport width / height | Viewport-relative sizing; vh corresponds to the large viewport in current browsers |
| 1svh | 1% of the small viewport height | Stable sections that fit while browser toolbars are visible |
| 1lvh | 1% of the large viewport height | A layout sized for retracted browser toolbars |
| 1dvh | 1% of the dynamic viewport height | A layout that adapts as browser toolbars expand or retract |
| 1vmin / 1vmax | 1% of the smaller / larger viewport dimension | Sizing tied to either dimension rather than height alone |
Use min-height for a hero that can grow
A fixed height can clip a hero when its heading wraps or the visitor increases text size. Use min-height so the section fills the small viewport when content is short and grows when content needs more space. The earlier 100vh declaration is a fallback for browsers that do not understand svh.
/* Stable with mobile browser toolbars visible. */
.hero {
min-height: 100vh;
min-height: 100svh;
box-sizing: border-box;
padding: 2rem;
}
Choose svh when you want to avoid resizing the section as the toolbar moves.
Test long headings, translated text, and increased text size.
A min-height fallback does not make old mobile 100vh behavior identical to svh.
Use 100dvh for a viewport-sized app shell
A chat or dashboard shell may need to track the available viewport and keep scrolling inside its main panel. In this pattern the header takes its natural size and the content gets the remaining space. minmax(0, 1fr) allows the content track to shrink so it can scroll.
html, body { margin: 0; }
.app-shell {
height: 100vh; /* Fallback */
height: 100dvh;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}
.app-content {
min-height: 0;
overflow: auto;
}
dvh may resize the layout as browser controls move; that is the intended behavior.
Browsers may update dynamic units in steps during a toolbar animation.
Use a fixed-height shell only when you deliberately provide an accessible scrolling area.
What dynamic units do not solve
100dvh is not a universal fix for every mobile overlay. The on-screen keyboard can affect the visual viewport differently from the layout viewport, depending on the browser and configuration. Safe-area insets are also separate from viewport height.
Test focused inputs and the submit button with the real mobile keyboard open.
Use safe-area padding where controls would overlap a notch or home indicator.
Check orientation changes and browser-toolbar expansion on the supported device.
Avoid claiming that desktop viewport emulation reproduces real iOS browser-toolbar behavior.
A practical verification sequence
Use Sizzy to compare the layout at several widths and heights while editing the CSS. Then verify toolbar expansion, scrolling, orientation, and keyboard behavior in the actual mobile browsers you support. A Chromium device viewport is useful for layout iteration, but it cannot certify how Safari’s browser controls behave.
Start with short content, then add enough content to overflow the screen.
Confirm the intended area scrolls without trapping important controls.
Try portrait and landscape and increase text size.
Repeat the keyboard and toolbar checks on a real phone.
Practical checklist
Choose svh for stable minimum height or dvh for dynamic viewport sizing.
Use min-height when ordinary page content should grow.
Provide an intentional scroll container when using height: 100dvh.
Verify the keyboard, toolbar, and safe areas on the target mobile browser.
Frequently asked questions
What does 100dvh mean in CSS?
It means 100% of the dynamic viewport height. The computed height can change as browser controls expand or retract. It is useful for layouts that should follow those changes.
Is 100dvh always better than 100svh?
No. dvh follows a changing viewport and may resize content while scrolling. svh uses the small viewport size and stays stable as browser toolbars move. Choose based on whether that resizing is desirable.
Does 100dvh account for the mobile keyboard?
Not consistently across browsers and configurations. Test the actual input flow on your supported mobile browser; do not rely on dvh alone to keep a focused field or submit button visible.
Sources and further reading
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.