How do you convert vh to px?

Multiply the vh value by the viewport height in pixels and divide by 100. For example, 50vh on a 900px viewport equals 450px.

Why does vh behave differently on mobile browsers?

Mobile browser UI can expand and collapse, which changes the visible viewport height. That means a vh-based element may recalculate when the browser chrome moves.

Can I convert px back to vh?

Yes. Divide the pixel value by the viewport height and multiply by 100 to get the equivalent vh value.

VH to PX Converter for Responsive Design

Converter Workspace

Everything needed for viewport-height calculations

Switch between live and custom viewport height, convert both directions, and copy production-ready CSS without leaving the page.

VH to PX

Get precise pixel output for any viewport-height value.

Viewport height unit

Pixel result 0 px

0vh × 0px / 100 = 0px

PX to VH

Reverse the equation to find the vh value you need.

Pixel target

If you edit this field directly, the tool recalculates the matching vh value using the current viewport height.

Viewport-height result 0 vh

0px / 0px × 100 = 0vh

Viewport Source

Use live browser height or set a custom device reference.

Viewport height in pixels

Width: 0 px 1vh: 0 px

CSS Output

Copy a ready-to-paste snippet based on your current calculation.

height: 75vh;
min-height: 0px;

Guide

Practical notes for using vh in real layouts

When vh is ideal

Use vh for hero sections, immersive panels, onboarding screens, and app layouts that should respond directly to screen height. It is especially effective when visual rhythm depends on the vertical size of the viewport.

What to watch on mobile

Mobile browser UI can shrink or expand the visible viewport. If layout stability matters, compare live mode with fixed device-height presets before shipping a design.

Formula recap

vh to px: multiply the vh value by viewport height and divide by 100. px to vh: divide the pixel value by viewport height and multiply by 100.

FAQ

Common questions from developers and designers

How do I calculate vh to px manually?

Take the viewport height in pixels, multiply it by the vh value, and divide by 100. Example: 60vh on a 900px viewport equals 540px.

What does 100vh mean?

100vh means 100% of the viewport height. It is commonly used for full-screen sections, splash layouts, and app shells.

Why does the result change when I resize the browser?

Because vh is based on the current viewport height. In live mode, this tool tracks the real browser height and updates the output as the viewport changes.