Syntax
value: Nvh | Nvw | Ndvh | Nsvh | Nlvh;Examples
Full-Height Sections
A common landing page pattern - a section that fills the screen.
.hero {
height: 100vh; /* fills the full viewport height */
width: 100vw;
}The Mobile Address Bar Problem, Solved
Why dvh is now preferred over vh on mobile.
.old-approach {
height: 100vh; /* on mobile, this can be taller than the VISIBLE area, since vh ignores the collapsing address bar */
}
.modern-approach {
height: 100dvh; /* dynamic viewport height - adjusts as the browser UI shows/hides */
}Parameters and values
- vh / vw (1% of viewport height/width): Classic viewport units, can misbehave on mobile
- dvh (dynamic viewport height): Adjusts in real-time as mobile browser UI shows/hides
- svh / lvh (small/large viewport height): Fixed to the smallest or largest possible viewport state
Best practices
- Use dvh instead of vh for full-height mobile layouts, to avoid content being cut off or leaving unwanted gaps as the address bar shows/hides
- Use vw carefully for font-size - it can make text so small or large on extreme screen widths that it should typically be combined with clamp()
- Test full-viewport-height layouts on actual mobile devices, not just a desktop browser's responsive mode, since the address bar behavior does not simulate accurately
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Length Units: px, %, em, rem
CSS offers several length units. px is an absolute, fixed unit. % is relative to the parent element. em is relative to the current element's font-size (compounding when nested). rem is relative to the root (html) element's font-size, avoiding the compounding problem of em, and is generally preferred for consistent, predictable sizing.calc(), min(), max(), clamp()
These functions let you compute CSS values dynamically. calc() performs math between different units. min() and max() pick the smallest or largest of a list of values. clamp(min, preferred, max) is especially powerful for fluid, responsive sizing - it uses the preferred value but never goes below min or above max.Sizing: width, min/max-width
Beyond a fixed width, CSS offers min-width and max-width to set flexible boundaries - an element can shrink or grow within those limits. This is fundamental to responsive design, letting content adapt fluidly while never becoming unreadably narrow or unreasonably wide.Logical Properties
Logical properties describe direction in terms of writing mode (inline/block flow) rather than fixed physical directions (left/right/top/bottom). margin-inline-start behaves like margin-left in English but automatically adapts for right-to-left languages, making them essential for properly internationalized layouts.
CSS offers several length units. px is an absolute, fixed unit. % is relative to the parent element. em is relative to the current element's font-size (compounding when nested). rem is relative to the root (html) element's font-size, avoiding the compounding problem of em, and is generally preferred for consistent, predictable sizing.calc(), min(), max(), clamp()
These functions let you compute CSS values dynamically. calc() performs math between different units. min() and max() pick the smallest or largest of a list of values. clamp(min, preferred, max) is especially powerful for fluid, responsive sizing - it uses the preferred value but never goes below min or above max.Sizing: width, min/max-width
Beyond a fixed width, CSS offers min-width and max-width to set flexible boundaries - an element can shrink or grow within those limits. This is fundamental to responsive design, letting content adapt fluidly while never becoming unreadably narrow or unreasonably wide.Logical Properties
Logical properties describe direction in terms of writing mode (inline/block flow) rather than fixed physical directions (left/right/top/bottom). margin-inline-start behaves like margin-left in English but automatically adapts for right-to-left languages, making them essential for properly internationalized layouts.