100 Vh to Px – Answer with Formula

100 vh equals the full height of the viewport in pixels. For example, if your screen height is 900 pixels, then 100 vh equals 900 px.

The “vh” unit means viewport height, which is a percentage of the total height of your browser window or device screen. Since 100 vh means 100% of the viewport height, converting it to pixels depends on the actual pixel height of the viewport at the moment.

Conversion Tool


Result in px:

Conversion Formula

To convert vh (viewport height) to pixels (px), you multiply the vh value by the height of the viewport in pixels, then divide by 100.

Formula:
px = (vh × viewport height in px) ÷ 100

This works because 1 vh equals 1% of the viewport’s height. So, 100 vh means 100% of the viewport height, which is the total pixel height of the screen. The viewport height can change when you resize the browser window or rotate a device.

Example: If the viewport is 800 px tall and you want to convert 50 vh to px:

  • 50 vh × 800 px = 40000
  • 40000 ÷ 100 = 400 px
  • So, 50 vh equals 400 px.

Conversion Example

  • 75 vh to px:
    • Assuming viewport height is 900 px
    • 75 × 900 = 67500
    • 67500 ÷ 100 = 675 px
    • Therefore, 75 vh equals 675 px.
  • 60 vh to px:
    • Viewport height: 1080 px
    • 60 × 1080 = 64800
    • 64800 ÷ 100 = 648 px
    • So, 60 vh equals 648 px.
  • 120 vh to px:
    • Viewport height: 720 px
    • 120 × 720 = 86400
    • 86400 ÷ 100 = 864 px
    • Thus, 120 vh equals 864 px.
  • 90 vh to px:
    • Viewport height: 1000 px
    • 90 × 1000 = 90000
    • 90000 ÷ 100 = 900 px
    • Therefore, 90 vh equals 900 px.

Conversion Chart

vh Value Pixels (px) at 900px viewport 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

Use this chart by finding the vh value on the left column, then read the corresponding pixel value on the right side, based on a viewport height of 900 pixels. Adjust calculations if your screen height is different.

Related Conversion Questions

  • How many pixels is 100 vh on a 1080p screen?
  • What does 100 vh convert to in px when viewport height changes?
  • Is 100 vh always equal to the screen’s pixel height?
  • How to calculate px from 100 vh on mobile devices?
  • Why does 100 vh px value change after resizing my browser?
  • What formula to use for converting 100 vh to pixels?
  • Does 100 vh equal 100% of the viewport’s pixel height every time?

Conversion Definitions

vh: The “vh” unit measures viewport height in CSS, representing 1% of the height of the visible browser window or device screen. If the viewport is 800 pixels tall, 1 vh equals 8 pixels. This relative unit allows layouts to adjust dynamically with screen size changes.

px: The “px” unit stands for pixels, the smallest single point of color on a digital display. Pixels are absolute units used to define fixed sizes in digital design, representing precise dots on the screen. The number of pixels varies depending on device resolution and screen size.

Conversion FAQs

Can the pixel value for 100 vh change without changing device?

Yes, because the pixel value of 100 vh depends on the viewport height, resizing the browser or changing orientation changes viewport height, so the pixel value for 100 vh also changes accordingly.

Is 100 vh the same as 100% height in CSS?

No, 100 vh means 100% of the viewport height, while 100% height means 100% of the parent container’s height, which can be different. So they are not always the same and can behave differently in layouts.

How does browser UI affect vh to px conversion?

Browser UI elements like address bars or toolbars may hide or show dynamically, affecting viewport height. This cause 100 vh to represent different pixel heights depending on whether UI elements are visible or not.

Does device pixel ratio affect vh to px conversion?

No, the conversion uses CSS pixels which are independent from device pixel ratio. Device pixel ratio affects how many actual screen pixels fit into one CSS pixel, but vh to px uses CSS pixels, so it remains consistent.

Can vh units be used for responsive design instead of px?

Yes, vh units adapt to screen height changes, making it useful for responsive layouts. Using vh avoids fixed pixel values that might not fit well on different screen sizes.