What is vh in html
Last updated: April 1, 2026
Key Facts
- VH stands for 'viewport height' and is a relative CSS length unit
- 1vh equals 1% of the initial containing block's height
- Works alongside other viewport units like vw (viewport width), vmin, and vmax
- Particularly useful for full-screen layouts and hero sections on websites
- Supported by all modern browsers including Chrome, Firefox, Safari, and Edge
Understanding Viewport Height
Viewport Height (VH) is a CSS unit that provides a way to size elements relative to the browser's visible window height. Unlike fixed pixels or percentages that reference parent elements, VH measurements are calculated based on the actual screen space available to the user. When you specify an element as 100vh, it will be exactly as tall as the current browser window, making it ideal for creating full-screen sections without JavaScript calculations.
Common Uses of VH
VH units are extensively used in modern web design for several key purposes:
- Full-screen hero sections: Setting a section to 100vh creates an immersive full-screen experience
- Responsive navigation: Menu height calculations can adapt to the viewport
- Game and interactive content: Canvas elements can use VH for optimal sizing
- Modal and overlay sizing: Popup windows can fill the screen appropriately
- Flexible layouts: Complex grid and flexbox layouts respond to viewport changes
VH vs Other CSS Units
Understanding the difference between VH and other measurements is crucial for choosing the right unit:
- Pixels (px): Fixed sizes that don't respond to viewport changes
- Percentages (%): Relative to parent element height, not viewport
- Em/Rem: Based on font size rather than viewport
- VW: Like VH but measures viewport width instead
- VMin/VMax: Use the smaller or larger of VH and VW
Browser Support and Considerations
Modern browsers provide excellent support for VH units. However, mobile browsers sometimes calculate VH differently, including or excluding the browser's address bar in their calculations. This can cause unexpected behavior, which developers address using viewport meta tags and careful testing. The CSS Working Group continues to refine viewport unit specifications to ensure consistent cross-browser behavior.
Related Questions
What is vw in CSS?
VW is a CSS unit equal to 1% of the viewport width, used similarly to VH but for horizontal measurements. It's useful for creating responsive widths that adapt to screen size.
How is VH different from percentages in CSS?
Percentages are relative to parent element dimensions, while VH is relative to the browser window height. VH creates full-screen effects more easily, whereas percentages depend on parent element sizing.
Can I use VH for mobile devices?
VH works on mobile devices but behaves differently than desktop due to browser UI elements. Mobile browsers may include or exclude address bars in viewport calculations, requiring testing and sometimes alternative approaches.