The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →CSS viewport units size an element against the viewport—not its parent. For mobile-height layouts, use 100svh when the section should fit the smaller viewport with browser controls expanded, 100lvh when you want the largest viewport, and 100dvh when the element should track the current viewport. The legacy vh unit maps to lvh, so a 100vh section can extend beyond the currently visible area while mobile browser controls are showing.
What viewport units measure
A viewport unit is a percentage of a viewport dimension, not a percentage of an element’s parent. Thus 1vw is one percent of the viewport width, and 1vh is one percent of its height. The viewport is the one belonging to the document being styled; inside an iframe, that means the iframe’s viewport, not automatically the top-level browser viewport. CSS Values and Units Module Level 4 defines the units, and MDN’s CSS length reference summarizes them.
As an Amazon Associate I earn from qualifying purchases.
How vh, svh, lvh, and dvh differ
On mobile, browser interface such as the address bar can expand or retract, changing the visible viewport. The newer height units make the viewport state explicit:
| Unit | Viewport reference | When it fits |
|---|---|---|
svh |
Small viewport height, with retractable browser interface expanded | When the element should fit within the more constrained viewport |
lvh |
Large viewport height, with retractable browser interface retracted | When the intended target is the maximum available viewport |
dvh |
Dynamic viewport height, based on the current viewport | When the element should follow changes as browser interface expands or retracts |
vh |
Maps to the large viewport height (lvh) |
For legacy behavior or when the large viewport is the intended reference |
The specification says the legacy mapping to large viewport-percentage units is presumed necessary for web compatibility. In practical terms, 100vh does not mean “the currently visible area” in every mobile browser state. See the specification and MDN reference.
#1 Best Overall
Choose a unit for the layout you want
Fit a panel within the constrained viewport
For a hero or panel that should fit when browser controls are expanded, start with min-height: 100svh. Prefer a minimum height for content sections that might grow beyond one screen; a fixed height can leave longer content without enough room.
Use the largest viewport
Use 100lvh when the design intentionally targets the maximum viewport available after retractable browser interface is out of the way. This can be appropriate when filling that maximum space matters more than fitting the smaller visible state.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Track the current viewport
Use height: 100dvh when the element should match the current dynamic viewport height. Because this unit can change as the browser interface changes, consider how resizing affects the content and surrounding layout.
Use logical or min/max dimensions when appropriate
The family is broader than physical width and height units. Use vi and vb to size against the viewport’s logical inline and block axes, which follow the writing mode. Use vmin or vmax when the smaller or larger viewport dimension is the intended reference. The MDN unit reference describes these axes and families.
Rank #3
Example: a viewport-sized section that can grow
This pattern gives the section at least the constrained viewport’s height while allowing its content to make it taller:
.hero {
min-height: 100svh;
}If the section should instead be exactly as tall as the dynamic viewport, use height: 100dvh—but ensure its content and overflow behavior are deliberate. Viewport sizing is only one part of layout: content length, overflow, and surrounding elements still affect whether the result works.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Validate on the browsers and devices that matter
Check the actual layout on target devices, including while browser controls expand and retract. Confirm that content remains reachable, that the selected unit matches the intended viewport state, and that adjacent page layout behaves as expected. These examples express the units’ semantics; they are not a claim of browser testing.
Recommended Free Tools
Or skip the browser setup
If you need a screenshot of the rendered page while checking responsive layouts, ScreenshotNeo can capture a URL with one request:
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo documentation for request options. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up for 1,000 free screenshots a month, with no card.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
