100 vh equals the total height of the viewport in pixels. For example, if your screen height is 900px, then 100 vh will be 900px.
The unit “vh” stands for viewport height, which means 1 vh is 1% of the current viewport height. So converting 100 vh to pixels depends on the actual height of the device or browser window in pixels.
Conversion Tool
Result in px:
Conversion Formula
The formula to convert vh to pixels is:
pixels = (vh value) × (viewport height in pixels) / 100
It works because 1 vh equals 1% of the viewport height, so multiplying the vh value by the viewport height and dividing by 100 gives the pixel equivalent.
For example, if the viewport height is 900 pixels, and you want to convert 50 vh to pixels:
- 50 vh × 900 pixels / 100 = 450 pixels
Conversion Example
- Convert 75 vh to px (viewport height = 800px):
- 75 × 800 / 100 = 600 pixels
- So, 75 vh equals 600 px.
- Convert 60 vh to px (viewport height = 720px):
- 60 × 720 / 100 = 432 pixels
- Therefore, 60 vh equals 432 px.
- Convert 110 vh to px (viewport height = 1000px):
- 110 × 1000 / 100 = 1100 pixels
- 110 vh is 1100 px, which means bigger than viewport height.
- Convert 90 vh to px (viewport height = 950px):
- 90 × 950 / 100 = 855 pixels
- So, 90 vh equals 855 px.
Conversion Chart
This chart shows vh values from 75.0 to 125.0, converted to pixels based on a viewport height of 900px. You can use it to quickly estimate pixel values for given vh units.
| vh | Pixels (900px viewport) |
|---|---|
| 75.0 | 675 |
| 80.0 | 720 |
| 85.0 | 765 |
| 90.0 | 810 |
| 95.0 | 855 |
| 100.0 | 900 |
| 105.0 | 945 |
| 110.0 | 990 |
| 115.0 | 1035 |
| 120.0 | 1080 |
| 125.0 | 1125 |
Related Conversion Questions
- How many pixels equals 100 vh on a 1080p screen?
- What is the pixel height of 100 vh if my browser window is 800px tall?
- Is 100 vh always the same as the screen height in pixels?
- How do I convert 100 vh to pixels in JavaScript?
- Does 100 vh include browser toolbars or just the viewport?
- Why does 100 vh sometimes not fill the entire screen in pixels?
- Can 100 vh be larger than the actual pixel height of my screen?
Conversion Definitions
vh: The unit “vh” measures 1% of the viewport height, which is the visible area of a webpage on the screen. It changes dynamically with resizing, so 100 vh equals the full height of the viewport, adapting to different devices and screen sizes.
px: The “px” or pixel is the smallest unit of measurement on digital displays. It represents a single point on the screen, and its actual physical size can vary depending on screen resolution and pixel density, but it is the standard unit for web design layouts.
Conversion FAQs
Can 100 vh be larger than the actual screen height in pixels?
Yes, 100 vh is based on the viewport height, which excludes some browser chrome like toolbars. However, if the viewport is resized or on some devices, 100 vh can appear larger or smaller than the total screen height. Sometimes, CSS or browser behavior causes 100 vh to exceed visible screen height.
Does 100 vh include the height of browser toolbars or UI elements?
No, 100 vh measures the height of the viewport, which is the visible area where the webpage is rendered. It excludes browser toolbars, address bars, or OS UI elements. So, 100 vh means the full height available for content, not the entire screen including browser chrome.
Why does 100 vh sometimes cause vertical scrollbars?
On some browsers, 100 vh calculates viewport height including areas hidden by OS or browser UI that appear/disappear dynamically (like mobile address bars). This can cause the content sized at 100 vh to overflow, triggering scrollbars. Adjustments or CSS workarounds are needed to prevent this.
How to get actual pixel height of 100 vh using JavaScript?
You can get it using window.innerHeight which returns the viewport height in pixels. Multiply a vh value by window.innerHeight and divide by 100 to get pixels. For 100 vh, pixels equals window.innerHeight directly.
Is 100 vh always equal across different devices?
No, 100 vh depends on the viewport height, which varies by device screen size, orientation, and browser chrome. So on a phone, tablet, or desktop, 100 vh can be different pixel values depending on the visible viewport area.