Using viewport-relative units like vh gives developers precise control over element height based on the visible screen area. The CSS height vh unit simplifies responsive layouts by tying vertical size directly to the device viewport.
This approach is popular for full-screen sections, hero banners, and modern UI components that must adapt fluidly across different devices and orientations.
| Unit | Reference | Typical Use Cases | Browser Support |
|---|---|---|---|
| vh | Viewport height | Full-screen layouts, responsive modals | Widespread in modern browsers |
| % | Parent container | Flexible containers, nested components | Well supported |
| px | Absolute measurement | Fixed UI elements, precise designs | Universal |
| rem | Root font size | Theming, scalable typography-related spacing | Widespread |
Understanding viewport height vh behavior
The CSS height vh unit represents one percent of the viewport's height, making it straightforward to create sections that match screen dimensions. One hundred vh equals the full height of the visible area, while fifty vh covers half the screen.
Because vh is dynamic, layouts respond immediately to resizing, rotation, or changes in device dimensions without complex calculations or scripts.
Practical examples of height vh usage
Developers commonly apply height vh to hero banners, landing pages, and modal overlays where visual impact and screen-filling design are priorities. Combining vh with max-height and min-height allows fine-tuning for edge cases on very large or very small screens.
For components like side panels or full-screen carousels, vh ensures that elements always align with the visible area, reducing layout shifts and improving perceived performance.
Browser handling and rendering details
Modern browsers calculate vh based on the layout viewport, which may differ from visual viewport on mobile when addressing bars and zoom behavior. Testing across devices helps avoid surprises with address bars or on-screen keyboards that temporarily resize the available vh space.
Using CSS custom properties and container queries can further refine how height vh interacts with complex layouts, especially when combining it with other length units.
Best practices and common pitfalls
Relying solely on vh can cause issues on mobile browsers when UI chrome hides or reveals, so pairing vh with min-height or flexible grids often yields more stable results. Performance remains strong because the browser handles recalculations efficiently, yet overuse on many elements can increase layout complexity.
Design systems benefit from defining standardized tokens based on vh, clarifying when full viewport height is appropriate versus more constrained sizing strategies.
Optimizing responsive design with height vh
To maximize the benefits of CSS height vh, treat it as one tool within a broader responsive strategy that includes relative units, constraints, and thoughtful breakpoints.
- Use vh for bold, full-screen sections like landing pages and hero banners.
- Combine vh with min-height to prevent content clipping on small screens.
- Prefer box-sizing border-box when padding or borders are part of the design.
- Test on real devices to account for mobile browser UI behavior.
- Leverage container queries and CSS custom properties for modular scaling.
FAQ
Reader questions
Does using vh break layouts on mobile when the address bar hides?
Yes, on some mobile browsers the available vh can shrink when the address bar hides on scroll, causing content to overflow or shift. Use min-height, CSS environment variables like safe-area-inset, or JavaScript fallbacks to preserve layout stability.
How does vh interact with padding and box-sizing?
Height vh sets the content height by default, and padding or border can increase total size unless box-sizing is set to border-box. Plan spacing accordingly to avoid unwanted overflow or clipped content.
Should I use vh instead of flexbox for full-height sections?
vh works well for simple full-height sections, but flexbox or grid can offer more robust internal alignment and distribution, especially when dealing with dynamic content or multiple child elements.
Can vh values cause horizontal scrollbars in some cases?
Not directly, since vh affects vertical sizing, but combined with fixed widths or oversized elements it may trigger overflow. Always test layouts across viewports to catch edge cases.