# 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
(844px)