VH to PX Converter

The Viewport Height with a unit of vh, is a common css measurement unit. While pixels (px), is a fixed unit that is equal to 1 dot of your screen, vh is relative to the visible area of your screen technically referred to as viewport. Use this converter to convert vh to px efficiently.

What is a Viewport Height?

A more in-depth discussion about the viewport height can found on the article section of PX to VH Converter. To summarize it, whatever is viewable on your window screen if you are using a desktop or laptop, or the screen area of your cellphone or tablet is referred to as "viewport". There's an exact viewport measurement on each device screen which can be found on manufacturing details of the phone.

How to Compute the Viewport Height to Pixels?

While 1px represents a fixed 1 dot measurement of your viewing screen. A 1vh represents a 1% of your viewport height.

So, how do I actually convert vh to px?

The first thing you need to get is the exact viewport height you are referring to. This is probably the height of the user's current desktop or laptop viewport, cellphone or table. Just for example, let's say, the device's viewport is 430px x 932px which is the viewport of Apple iPhone 14 Pro Max. That leaves as a 932px viewport height.

Given that you have an actual vh measurement you want to convert to pixels, and let's assume it is 50vh. Just divide the reference viewport height by 100, then multiply the result by your vh.

VH to PX Formula

px = (viewport height / 100) * vh

Based on the formula, our example data on vh to px conversion would look like this:

px = (935px / 100) * vh
px = 9.35 * 50
px = 467.5

Explanation: The first thing we did was divide the viewport height by 100. Why is that?

It is because 100 represents the full 100% height of the viewport. Hence, if we divide 935px by 100, we know that 9.35px is equivalent to 1% of the viewport height (where 935px is the 100%). Note that 1vh is equal to 1% of viewport height.

Finally, to get the result, we just multiply 50vh to 9.35 to get the pixels equivalent which is 467.5px. This means that when the device's viewport height is 935px, if you use 50vh as measurement, the equivalent value of that to pixels is 467.5px.

How to get the Viewport Height?

You can get the Viewport Height (vh) of your document by using JavaScript. The window object has an attribute called innerHeight. You can call like this window.innerHeight, which will return you the vh in pixels.

What is the Usage of Viewport Height?

There are two use cases that I thought of when it comes to using vh.

  1. The first one is I want to make the footer stick at the bottom and header stick at the top of the full screen even when there's a blank page. I can achieve that by using calc(100vh - footerpx - headerpx).
  2. Next, is I may want to get the exact equivalent of 60vh to pixels to check with JavaScript if an image or any iframe will fit or will it break the web design.

Here are common viewport equivalents of popular devices against common vh sizes.

PX iPhone 12 Pro
iPad Pro 12 Pro
Samsung Galaxy S9+
10vh 84.4px 136.6px 74px
20vh 168.8px 273.2px 148px
30vh 253.2px 409.8px 222px
40vh 337.6px 546.4px 296px
50vh 422px 683px 370px
60vh 506.4px 819.6px 444px
70vh 590.8px 956.2px 518px
80vh 675.2px 1092.8px 592px
90vh 759.6px 1229.4px 666px