What is vh in html

Last updated: April 1, 2026

Quick Answer: VH is a CSS unit of measurement where 1vh equals 1% of the browser's viewport height, enabling responsive design that adapts to different screen sizes without JavaScript.

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.

More What Is in Daily Life

What Is a Credit ScoreA credit score is a three-digit number, typically ranging from 300 to 850, that represents your cred…
What Is CD rates make no sense based on length of time invested. Explain like I'm 5CD (Certificate of Deposit) rates often don't increase with longer lock-up times the way people expe…
What is a phdA PhD (Doctor of Philosophy) is a doctoral degree earned after completing advanced academic research…
What is a polymathA polymath is a person with deep knowledge and expertise across multiple different fields or academi…
What is aaveAAVE stands for African American Vernacular English, a dialect with distinct grammar, pronunciation,…
What is aarch64ARMv8-A (commonly called ARM64 or AArch64) is a 64-bit processor architecture developed by ARM Holdi…
What is about menTopics and discussions about men typically encompass masculinity, male identity, gender roles, men's…
What is abiturAbitur is the German academic qualification awarded upon completion of secondary education, typicall…
What is abrosexualAbrosexual is a sexual orientation identity where a person's sexual attraction changes or fluctuates…
What is abgABG is an Indonesian acronym standing for 'Anak Baru Gede,' which refers to adolescent girls or teen…
What is aaaAAA batteries are a standard cylindrical battery size measuring 10.5mm in diameter and 44.5mm in len…
What is aacAAC (Advanced Audio Codec) is a digital audio compression format that provides better sound quality …
What is aaa gameAAA games are high-budget video games developed by large studios with budgets typically exceeding $1…
What is a proxyA proxy is a server that acts as an intermediary between your device and the internet, forwarding yo…
What is ableismAbleism is discrimination and prejudice against people with disabilities based on the assumption tha…
What is absAbs, short for abdominal muscles, are the muscles in your core that flex your spine and stabilize yo…
What is abortionAbortion is a medical procedure that ends pregnancy by removing the fetus before viability. It can b…
What is accutaneAccutane (isotretinoin) is a powerful prescription medication derived from vitamin A used to treat s…
What is acetaminophenAcetaminophen, also known as paracetamol, is an over-the-counter pain reliever and fever reducer use…
What is acidAcid is a chemical substance that donates protons (hydrogen ions) to other substances, characterized…