VH to PERCENT Converter
Use this free online vh to percent converter tool to convert viewport height units to percentage values relative to a parent container. VH is always relative to viewport height, while percentage is relative to the parent element. This converter calculates the equivalent percentage based on your viewport and parent container sizes.
To convert vh to percentage, first calculate the pixel value (vh × viewport height ÷ 100), then convert that to a percentage of the parent container (pixels ÷ parent height × 100). Adjust both viewport height and parent/base size inputs for accurate results.
Conversion Formula
percent = (vh × viewport height ÷ 100) ÷ parent height × 100
For example, to convert 1vh to percent with a 1080px viewport and 1000px parent container: (1 × 1080 ÷ 100) ÷ 1000 × 100 = 1.08%. This means 1vh equals 1.08% of the parent container.
VH to PERCENT Converter Conversion Table (Viewport Height: 1080px, Parent: 1000px)
| VH | % |
|---|---|
| 1vh | 1.08percent |
| 2vh | 2.16percent |
| 5vh | 5.4percent |
| 10vh | 10.8percent |
| 15vh | 16.2percent |
| 20vh | 21.6percent |
| 25vh | 27percent |
| 30vh | 32.4percent |
| 40vh | 43.2percent |
| 50vh | 54percent |
| 60vh | 64.8percent |
| 70vh | 75.6percent |
| 75vh | 81percent |
| 80vh | 86.4percent |
| 90vh | 97.2percent |
| 100vh | 108percent |
What is VH?
Viewport Height (vh) is a relative CSS unit where 1vh equals 1% of the browser viewport's height. Like VW, it responds dynamically to viewport changes, making it perfect for full-height sections and responsive vertical spacing. VH units are commonly used for hero sections, modals, and mobile-first designs that need to adapt to various screen heights.
What is %?
Percentage (%) is a relative CSS unit that scales based on the parent element's corresponding property value. For example, width: 50% means 50% of the parent's width, while font-size: 150% means 150% of the parent's font-size. Percentages are fundamental for creating flexible, responsive layouts that adapt to their containers.