The PX to VH Converter turns pixels into viewport height (vh) units for full-height, responsive layouts. One vh equals 1% of the viewport height, so vh-based sizes scale with the screen’s height.
vh is the unit for anything measured against the screen’s height — a hero that fills the first screenful, a modal sized to the window, or vertical spacing that adapts to the display. Enter a pixel value and your target viewport height, and the converter returns the vh equivalent (and back).
How to convert px to vh
- Enter the pixel value.
- Enter the viewport height (for example 1080px).
- Read the vh value; it also converts vh back to px.
The px to vh formula
vh = (px ÷ viewport height) × 100. For 540px on a 1080px-tall viewport, that’s (540 ÷ 1080) × 100 = 50vh.
Full-height sections with vh
The classic use of vh is a section that fills the screen: height: 100vh makes a hero or landing panel exactly one screenful tall, so the next section begins right at the fold. Smaller values (50vh, 75vh) size panels to a portion of the height, useful for split layouts and image banners that should stay proportional to the display.
The mobile 100vh problem
On mobile browsers the address bar shows and hides as you scroll, changing the visible height — so 100vh often refers to the larger height and an element can extend behind the browser UI, causing an awkward jump or overflow. Newer units solve this: svh (small), lvh (large), and dvh (dynamic) viewport heights. A practical approach is to use dvh where supported, or to design so a little overflow is acceptable, rather than relying on 100vh being exact on phones.
Frequently Asked Questions
How do I convert px to vh?
Divide the pixel value by the viewport height and multiply by 100. 540px on a 1080px viewport is 50vh.
When should I use vh units?
Use vh for full-height sections and hero areas that should fill a portion of the screen height regardless of device.
What viewport height should I use?
Use the target device height, such as 1080px for desktop or 812px for a typical phone.