PX to VH Converter

Convert pixel values to viewport height units for vertical responsive designs

PX to VH Calculator

About Viewport Height Units:

VH (viewport height) units are relative to the browser's viewport height. 1vh equals 1% of the viewport height. Enter the current viewport height and the pixel value you want to convert.

px
Most common desktop height is 768px
px
The pixel value you want to convert
Conversion Result
1.5vh
20px = 1.5vh
Viewport: 768px

Responsive Comparison

See how this value will scale across different viewport heights:

Device Viewport Height VH Value Equivalent in Pixels

Batch Converter

Convert multiple pixel values at once. Enter values separated by spaces, commas, or new lines.

Batch Results
Pixels VH CSS Code

Common Use Cases for VH Units

Viewport Height (VH) units are particularly useful in the following scenarios:

Use Case Typical VH Values CSS Example
Full-Height Sections 100vh .hero { height: 100vh; }
Fixed Headers/Footers 5vh - 10vh header { height: 8vh; }
Vertical Spacing 2vh - 5vh section { margin-bottom: 3vh; }
Content Blocks 30vh - 50vh .content { min-height: 50vh; }
Vertical Centering 50vh + transform .center { top: 50vh; transform: translateY(-50%); }
Limiting Modal Heights 70vh - 90vh .modal { max-height: 80vh; }
Split Screens 50vh .split { height: 50vh; }

Frequently Asked Questions

The main difference between VH (viewport height) units and percentage heights is what they're relative to:

  • VH units are always relative to the viewport height (browser window size), regardless of parent elements.
  • Percentage heights are relative to their parent container's height, which often requires parent elements to have a defined height.

Key differences:

  • 50vh is always 50% of the viewport height, no matter where the element is placed in the DOM.
  • An element with height: 50% will only be 50% of its parent's height, and if the parent has no defined height, the percentage may not work as expected.
  • Percentage heights in CSS often require a chain of defined heights all the way up to the root element, while vh units work regardless of parent heights.

VH units solve the classic CSS problem of creating elements with heights relative to the viewport, which was difficult to achieve reliably with percentages alone.

VH units are best used in the following scenarios:

  1. Full-Screen Sections - Create sections that precisely fill the viewport height regardless of screen size.
  2. Responsive Vertical Layouts - When elements need to scale vertically based on screen height.
  3. Fixed-Height Elements That Should Scale - Headers, footers, or navigation bars that should adjust based on viewport size.
  4. Vertical Spacing - Creating consistent vertical margins and padding that scale with the viewport.
  5. Vertical Centering - Positioning elements at specific vertical points relative to the viewport.

Fixed pixel heights are generally better for:

  • UI elements that should maintain a consistent size regardless of viewport.
  • Elements where precise control is needed for specific breakpoints.
  • Small components where scaling would create usability issues.
  • Content where maintaining specific proportions is critical.

A useful approach is to combine VH units with min-height or max-height constraints to ensure elements remain usable across all device sizes.

To calculate a VH value manually, use this formula:

VH Value = (Target Size in Pixels ÷ Viewport Height in Pixels) x 100

For example, if you want an element to be 150px tall on a 768px viewport height:

VH = (150 ÷ 768) x 100 = 19.53vh

This means the element will be exactly 150px tall on a 768px viewport height, but will scale proportionally on other viewport sizes:

  • On a 1080px viewport: 19.53vh = 211px
  • On a 667px viewport: 19.53vh = 130px

For reliable layouts, consider using the calc() function to combine fixed and relative units: height: calc(100px + 10vh);

While VH units are powerful, there are some common issues to be aware of:

  • Mobile Browser Address Bar Issues - On mobile browsers, the viewport height changes when the address bar appears/disappears, which can cause unexpected layout shifts with 100vh elements. Consider using dvh (dynamic viewport height) where supported or JavaScript workarounds.
    height: 100dvh; /* Modern browsers */ height: calc(var(--vh, 1vh) * 100); /* With JS fallback */
  • Small Viewports - Elements sized with VH can become too small on short viewport heights, leading to unusable interfaces.
    height: max(200px, 20vh); /* Minimum height of 200px */
  • Large Viewports - Elements can become excessively large on tall viewports, causing readability or usability issues.
    height: min(400px, 30vh); /* Maximum height of 400px */
  • Content Overflow - Fixed-height elements in VH can cause content overflow if the content is larger than the allocated space.
    min-height: 50vh; /* Use min-height instead of height */
  • Scrollable Areas - Using 100vh for scrollable content areas can create a double scrollbar effect.
    height: calc(100vh - 80px); /* Subtract fixed elements */

Always test VH-based layouts on various devices, particularly mobile browsers, which handle viewport units differently due to UI elements like address bars and toolbars.

About VH Units

VH (Viewport Height) units are relative values that represent a percentage of the browser's viewport height. 1vh equals 1% of the viewport height, making them ideal for creating layouts that scale vertically with the screen.

Benefits of VH Units
  • Vertical Responsiveness: Elements scale with screen height
  • Full-Screen Layouts: Easy creation of viewport-filling sections
  • Parent Independence: Heights that work without parent height settings
  • Proportional Spacing: Vertical margins and padding that scale proportionally

VH is part of a family of viewport units that includes vw (viewport width), vmin (minimum of vw and vh), and vmax (maximum of vw and vh).

CSS Usage Examples

Common ways to use VH units in your CSS:

/* Full-height hero section */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fixed-height header */
header {
  height: 10vh;
  position: fixed;
  top: 0;
  width: 100%;
}

/* Content area accounting for header */
main {
  min-height: calc(100vh - 10vh);
  padding-top: 10vh;
}

/* Vertical spacing */
section {
  margin-bottom: 5vh;
}

/* Minimum height container */
.card {
  min-height: 30vh;
}

/* Constraining excessive heights */
.content {
  max-height: 70vh;
  overflow-y: auto;
}

/* Dynamic vertical centering */
.centered {
  position: absolute;
  top: 50vh;
  transform: translateY(-50%);
}

For mobile browsers, consider using dvh (dynamic viewport height) units where supported, which account for address bar changes.

Related Converters

VH to PX Converter PX to VW Converter PX to VMIN Converter PX to VMAX Converter All CSS Unit Converters