What is vh in css

Understanding Viewport Height Units

The vh unit in CSS stands for viewport height and is part of a set of relative length units that respond to the browser window dimensions. 1vh is equal to 1% of the current viewport height, so 100vh fills the entire visible height of the browser window. This makes vh units particularly useful for modern web design where responsive layouts are essential.

How VH Works in Practice

When you set an element to 50vh, that element will be exactly half the height of the visible browser window, regardless of the content or parent container. This scaling happens automatically whenever the viewport is resized. VH units are calculated fresh on every layout calculation, ensuring your design remains responsive without media queries.

Common Use Cases

• Full-screen hero sections (height: 100vh)
• Split-screen layouts with equal height sections
• Hero images and banners that scale with the viewport
• Modal dialogs and overlay components
• Multi-section pages where each section fills the viewport

Important Considerations

One important consideration is how mobile browsers handle vh. Many mobile browsers include the address bar in their viewport calculations, which means 100vh might be taller than the visible area. Some developers use alternative solutions like JavaScript-based measurements for mobile to account for this behavior. Additionally, the vh unit doesn't account for horizontal scrollbars on desktop browsers, potentially causing layout shifts.

Comparison with Other Units

Unlike fixed pixel units (px), vh units scale with the viewport, making them more responsive. Compared to percentage (%) units which depend on the parent container, vh is independent of parent element size. This makes vh ideal for full-screen components while percentage is better for content-dependent sizing.