PX to VH Converter
Pixels to vh across eight viewports, with the svh and dvh figures, because 100vh on a phone is taller than the screen and hides whatever is at the bottom.
Pixels 600px
At design height 1080px
In vh 55.5556vh
In rem 37.5rem
55.5556vh resolves to
360×800, small phone 444.44px
390×844, phone 468.89px
768×1024, tablet, portrait 568.89px
1024×768, tablet, landscape 426.67px
1280×800, small laptop 444.44px
1440×900, laptop 500px
1920×1080, desktop 600px <- your design height
2560×1440, large desktop 800px
On a phone, roughly
55.5556vh 469px, chrome ignored
55.5556svh 413px, smallest viewport
55.5556dvh between the two, as the bar moves
600px at a 1080px design height is 55.5556vh. On a 844px-tall phone
viewport that is 469px, and about 413px of it is above the browser
chrome.
vh measures the viewport as though the address bar and toolbar were not
there, which on a phone they are. A 100vh section therefore runs under
the chrome, and anything at the bottom of it, a button most often,
cannot be reached until the user scrolls a section they were not told
was scrollable.
Use dvh when the height should follow the chrome as it hides and shows,
svh when the layout must fit the smallest the viewport ever gets, and
lvh only when overflow is fine. dvh reflows while the bar animates, so a
full-height hero with a centred heading will shift as the user scrolls;
svh is the calmer choice for anything with a fixed element in it.
These units have been in every current browser since 2022, and the old
workaround of setting a --vh custom property from window.innerHeight in
JavaScript is no longer needed. If you still support a browser that
lacks them, write the vh value first and the dvh value after it, and the
older browser keeps the one it understands.
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
Pixels divided by the design height, times a hundred. That is the conversion.
The reason this page has more on it than that: vh on a phone is not the height of
what you can see. It measures the viewport as though the address bar and the toolbar
were not there. So a 100vh section runs underneath the browser chrome, and the
button you put at the bottom of the hero cannot be reached until the user scrolls a
section nobody told them was scrollable.
The units that fix it are dvh, svh and lvh. This reports all of them, because
the only honest answer to “what is 100vh” is “which viewport did you mean?”.
How to use
- Put in the pixel size and the design height you measured it at.
- Read the table across eight viewports, remembering that a landscape tablet is shorter than a portrait phone.
- Use the svh and dvh lines to decide which unit to ship.
Example
600px at a 1080px design height:
Pixels 600px
At design height 1080px
In vh 55.5556vh
In rem 37.5rem
55.5556vh resolves to
360×800, small phone 444.44px
390×844, phone 468.89px
768×1024, tablet, portrait 568.89px
1024×768, tablet, landscape 426.67px
1280×800, small laptop 444.44px
1440×900, laptop 500px
1920×1080, desktop 600px <- your design height
2560×1440, large desktop 800px
On a phone, roughly
55.5556vh 469px, chrome ignored
55.5556svh 413px, smallest viewport
55.5556dvh between the two, as the bar movesNote that a landscape tablet at 768px tall gives a smaller result than a portrait phone at 844px. Viewport height does not follow screen size in any useful order, which is most of why vh layouts are harder than vw ones.
Pitfalls
100vh is taller than the visible area on a phone. This is the single most common CSS layout bug on mobile. Anything pinned to the bottom of a 100vh block is partly behind the browser chrome on first paint.
dvh reflows while the address bar animates. That is the point of it, and it means
a centred heading in a full-height hero will move as the user scrolls. If that shift
is unacceptable, use svh and accept a little empty space when the bar is hidden.
svh is the safe one for anything fixed. It is the smallest the viewport ever gets, so a layout that fits in svh fits always.
lvh will overflow. It is the largest the viewport gets, which on a phone is with the chrome hidden. Use it only where overflow does not matter.
Viewport height changes when the on-screen keyboard opens. On some platforms the
visual viewport shrinks and on others it does not, so a 100dvh form with a fixed
footer can end up with the footer above the keyboard on one device and behind it on
another. Test with a field focused.
A vh height ignores content. If the content is taller than the box, it overflows or
clips. min-height rather than height is almost always what you wanted.
Compatibility
Arithmetic in the browser: nothing is uploaded and nothing is stored. The share link carries the figures.
dvh, svh and lvh have been in every current browser since 2022: Chrome and Edge
108, Safari 15.4, Firefox 101. The old workaround, setting a --vh custom property
from window.innerHeight and multiplying by 100, is no longer needed and is worth
deleting when you find it, because it does not update while the bar animates and the
new units do.
If you still support a browser without them, write the vh declaration first and the
dvh one immediately after. The older browser keeps the value it understands and
ignores the second; the newer one takes the second. No feature query needed.
The “on a phone, roughly” figures use a working allowance for browser chrome rather than a measurement of any one device. They are there to show the size of the problem; the real numbers vary by browser, platform and whether a toolbar is pinned.
Frequently asked questions
What should I use instead of 100vh for a full-screen hero?
min-height: 100svh if the layout has anything anchored to its bottom edge, and
min-height: 100dvh if it is a simple centred block and you would rather it filled
the screen as the chrome hides.What is the difference between dvh, svh and lvh?
svh is the smallest the viewport gets, with all the browser chrome showing. lvh is
the largest, with it hidden. dvh is whatever it is right now, and it changes as you
scroll.Why is my landscape tablet row smaller than my phone row?
Should I use vh for spacing?
Does vh include the scrollbar like vw does?
vw rather than vh.