Converter · CSS unit tool
VH to PX converter
px = (vh ÷ 100) × viewportHeight. 1vh is 1% of the viewport height, so 50vh on an 800px-tall window is 400px. Enter your viewport height below to resolve any vh value.
Result
450.00 px
50vh × 900px ÷ 100 = 450.00px
Keyboard tip: press Tab or Shift+Tab to switch fields.
The VH to PX formula
Multiply the vh value by the viewport height and divide by 100: px = (vh ÷ 100) × viewportHeight.
Reference at an 800px viewport height: 10vh = 80px, 25vh = 200px, 50vh = 400px, 100vh = 800px.
The mobile 100vh problem
On phones, `100vh` is measured against the *largest* viewport (toolbars hidden), so a `100vh` section can be taller than the visible area and clip content under the address bar.
Prefer `dvh` (dynamic), `svh` (small), or `lvh` (large) for full-height sections, and use `min-height: 100dvh` so content can still grow when it overflows.
Copy-ready examples
.hero {
min-height: 100dvh; /* not 100vh */
}Frequently asked questions
- Why does 100vh overflow on mobile browsers?
- Mobile 100vh is based on the viewport with browser chrome hidden, so it can exceed the visible height. Use dvh/svh/lvh instead.
- What's the difference between dvh, svh and lvh?
- svh is the smallest viewport (chrome shown), lvh the largest (chrome hidden), and dvh adapts dynamically as the chrome appears and disappears.
- Is vh to px converter free to use?
- Yes. UnitCraft calculators are free and run entirely in your browser.
- Does UnitCraft send my input values to a server?
- No. Calculator inputs are processed locally in the browser tab.
- Can I copy the generated CSS output?
- Yes. Each tool provides copy-ready snippets so you can paste values directly into code.