Popular Conversions
On a 1080 px tall screen: 100px = 9.259vh, 540px = 50vh. On an 844 px tall phone: 100px = 11.848vh. The converter above starts with your own window height.
Convert pixels to viewport-height units. 1vh = 1% of the viewport height, so on a 1080 px tall screen 1vh = 10.8 px.
On a 1080 px tall screen: 100px = 9.259vh, 540px = 50vh. On an 844 px tall phone: 100px = 11.848vh. The converter above starts with your own window height.
VH values for common pixel sizes at four typical viewport heights.
| Pixels (px) | Small phone (667px) | Phone (844px) | Laptop (768px) | Desktop (1080px) |
|---|---|---|---|---|
| 10px | 1.499vh | 1.185vh | 1.302vh | 0.926vh |
| 20px | 2.999vh | 2.37vh | 2.604vh | 1.852vh |
| 40px | 5.997vh | 4.739vh | 5.208vh | 3.704vh |
| 50px | 7.496vh | 5.924vh | 6.51vh | 4.63vh |
| 60px | 8.996vh | 7.109vh | 7.813vh | 5.556vh |
| 80px | 11.994vh | 9.479vh | 10.417vh | 7.407vh |
| 100px | 14.993vh | 11.848vh | 13.021vh | 9.259vh |
| 120px | 17.991vh | 14.218vh | 15.625vh | 11.111vh |
| 150px | 22.489vh | 17.773vh | 19.531vh | 13.889vh |
| 200px | 29.985vh | 23.697vh | 26.042vh | 18.519vh |
| 250px | 37.481vh | 29.621vh | 32.552vh | 23.148vh |
| 300px | 44.978vh | 35.545vh | 39.063vh | 27.778vh |
| 400px | 59.97vh | 47.393vh | 52.083vh | 37.037vh |
| 500px | 74.963vh | 59.242vh | 65.104vh | 46.296vh |
| 600px | 89.955vh | 71.09vh | 78.125vh | 55.556vh |
| 700px | 104.948vh | 82.938vh | 91.146vh | 64.815vh |
| 800px | 119.94vh | 94.787vh | 104.167vh | 74.074vh |
On mobile browsers the address bar appears and disappears while scrolling, so the visible height keeps changing. Classic 100vh uses the largest height, which can hide the bottom of a full-screen section. Modern browsers add three units:
For a hero section that should exactly fill the screen, use min-height: 100dvh.
vh = px ÷ viewport height × 100
Example: 300 px on an 844 px tall screen is 300 ÷ 844 × 100 = 35.545vh.
Divide the pixel value by the viewport height and multiply by 100. On a 1080 px tall screen, 100 px = 9.259vh.
100vh uses the height with the browser bars hidden. Use 100dvh or 100svh to fit the space that is actually visible.
vh is fixed to the largest viewport height. dvh changes as mobile browser bars show and hide, so it always matches the visible area.
Use the height of the screen you are designing for. The converter fills in your current window height automatically.
No. All conversions happen entirely in your browser. The values you enter are never sent to our server or saved.