Conversion Form

VH
PT

About the Unit

VH (Viewport Height): Like VW, VH is a relative unit, but instead of being based on the viewport width, it is based on the height of the viewport. 1vh represents 1% of the viewport height, meaning that if the viewport height is 1000px, 1vh will be equal to 10px. The vh unit is widely used when you want elements to occupy a percentage of the screen height, making the design more adaptable to different device sizes. A common use case is to create 'hero sections' or headers that occupy the full height of the screen. For example, if you set an element’s height to 100vh, it will occupy 100% of the viewport height, ensuring that the content automatically adjusts to the screen height of the device, regardless of its resolution. This unit is also useful for scroll layouts on long pages, where the height of elements is crucial for navigation.

Pro Tip: vhpt

Use vh for fluid, responsive heights and pt for fixed print designs.

Quick Reference: Unit Conversion by Tens

VHPT
10vh81.000203pt
20vh162.000405pt
30vh243.000608pt
40vh324.00081pt
50vh405.001013pt
60vh486.001215pt
70vh567.001418pt
80vh648.00162pt
90vh729.001823pt
100vh810.002025pt
110vh891.002228pt
120vh972.00243pt
130vh1053.002633pt
140vh1134.002835pt
150vh1215.003038pt
160vh1296.00324pt
170vh1377.003443pt
180vh1458.003645pt
190vh1539.003848pt
200vh1620.00405pt
210vh1701.004253pt
220vh1782.004455pt
230vh1863.004658pt
240vh1944.00486pt
250vh2025.005063pt

Live Unit Preview

See how different CSS units affect the size of the box below:

10px

10rem

10em

10%

10vw

10vh

Common Mistake

Use vh for fluid height layouts and pt for fixed print typography.

Real Code Example

/* Mobile-first card with vh → pt */
.card {
  padding: 0vh;     /* undefinedpt */
  font-size: 1.5rem;
  width: min(90vw, 40ch);
}

Frequently Asked Questions About VH

When should I use vh instead of vh?

Use vh for vertical scaling and full-height sections.

How many vh is 1vh?

1vh = 1% of the viewport height.

Is vh affected by screen size?

Yes, it changes with browser height.

Is vh good for hero sections?

Yes, it's perfect for full-screen components.

Keyboard Shortcuts

  • Ctrl + C: Convert
  • Ctrl + I: Invert units
  • Esc: Reset values

More popular conversions