NidhiDisclosure: This post contains affiliate links, which means we may earn a commission if you purchase through our links at no extra cost to you.
100 vh equals the height of the viewport in pixels, so if your screen height is 900 pixels, then 100 vh is 900 px.
The unit “vh” stands for viewport height, meaning 1 vh is 1% of the viewport’s height. Converting 100 vh to pixels depends on the actual height of the device or window. Thus, 100 vh converts to the full height of the screen in pixels.
Conversion Tool
Result in px:
Conversion Formula
The conversion from vh to px uses a simple formula: pixels = (viewport height in pixels) × (vh value) ÷ 100. Since 1 vh equals 1% of the viewport height, multiplying the vh value by the viewport height and dividing by 100 gives the pixel equivalent.
Because viewport height changes depending on device or window size, the px value for vh will vary. For example, if the viewport height is 800px and you want to convert 50 vh, you calculate:
- Take 800px (viewport height)
- Multiply by 50 (the vh value)
- Divide by 100 (since 1 vh = 1%)
Mathematically: (800 × 50) ÷ 100 = 400 px
Conversion Example
- Convert 75 vh to px when viewport height is 900px:
- Multiply: 900 × 75 = 67500
- Divide by 100: 67500 ÷ 100 = 675 px
- Result: 75 vh = 675 px
- Convert 125 vh to px with viewport height 720px:
- Multiply: 720 × 125 = 90000
- Divide by 100: 90000 ÷ 100 = 900 px
- Result: 125 vh = 900 px
- Convert 50 vh to px if viewport height is 1080px:
- Multiply: 1080 × 50 = 54000
- Divide by 100: 54000 ÷ 100 = 540 px
- Result: 50 vh = 540 px
Conversion Chart
This chart shows vh values from 75.0 to 125.0 and their equivalent pixels assuming a viewport height of 900px. To use, find the vh value in the first column and read across to see the pixel value for that viewport size.
| vh Value | Pixels (px) at 900px height |
|---|---|
| 75.0 | 675.0 |
| 80.0 | 720.0 |
| 85.0 | 765.0 |
| 90.0 | 810.0 |
| 95.0 | 855.0 |
| 100.0 | 900.0 |
| 105.0 | 945.0 |
| 110.0 | 990.0 |
| 115.0 | 1035.0 |
| 120.0 | 1080.0 |
| 125.0 | 1125.0 |
Related Conversion Questions
- How many pixels are in 100 vh on a 1080p screen?
- What does 100 vh convert to in px for mobile devices?
- Is 100 vh always equal to the screen height in pixels?
- How to calculate px from 100 vh when the browser window is resized?
- Does 100 vh include browser toolbars when converting to px?
- What changes when converting 100 vh to px on different devices?
- Can 100 vh be larger than the actual screen pixel height?
Conversion Definitions
vh: The unit vh stands for viewport height, representing 1% of the total height of the visible area on a screen or browser window. It scales dynamically as the window resizes, useful for responsive designs where elements adjust to screen height changes.
px: Pixels, abbreviated as px, are the smallest unit of measurement in digital screens representing a single point of color. Pixel size varies by screen resolution and density but is a fixed unit for specifying dimensions in web design and graphics.
Conversion FAQs
Does 100 vh always equal the device screen height in pixels?
Not always. 100 vh corresponds to the viewport’s height, which is the visible area inside the browser window. If the browser window is smaller than the full screen or if toolbars reduce the viewport, 100 vh will be smaller than the total device screen height in pixels.
How does zooming affect converting vh to px?
Zooming changes the scale of content, but vh units relate to the viewport’s visual height. While zoom changes pixel density visually, the vh to px calculation depends on the viewport size in pixels, which may or may not change with zoom depending on the browser.
Can vh units be used for height in print layouts?
No, vh units are designed for screen-based layouts reflecting viewport size. Print layouts use physical measurements like inches or centimeters, because viewport sizes dont apply when printing documents.
Why does 100 vh sometimes cause vertical scrollbars?
Because 100 vh is the viewport height, elements sized to 100 vh may not account for margins, paddings, or browser UI elements. This can cause content overflow, triggering scrollbars even when it fits visually, due to box-sizing or default styles.
Is it possible for 100 vh to be different on devices with notches or UI overlays?
Yes, devices with screen notches or overlays may reduce the effective viewport height. While 100 vh calculates based on visible viewport, some browsers adjust vh units to exclude unsafe areas, causing 100 vh to be smaller than total screen height.
