PX to VH Converter
Convert pixels to viewport height units. Build full-screen sections and vertical layouts that adapt to any screen size.
Formula
vh = (px ÷ viewport height) × 100
Quick Reference Table
Building Full-Screen Layouts with VH
The vh unit is most commonly used for one thing: making sections that fill the entire visible screen. A hero section at 100vh takes up exactly the height of the browser window, creating that clean, app-like feel where each section is its own "screen." Scroll down, and the next section fills the viewport again.
But vh has a well-known problem on mobile phones, and it has caught countless developers off guard. Mobile browsers have a toolbar (the address bar and navigation buttons) that slides up and down as you scroll. When the toolbar is visible, the actual visible area is shorter than what vh reports. This means your "100vh" section is actually taller than what the user can see, and the bottom gets cut off.
Modern CSS has solved this with three new units: svh (small viewport height, with toolbar visible), lvh (large viewport height, toolbar hidden), and dvh (dynamic, updates in real time). For most cases, dvh is the one you want.
The Mobile VH Problem (and How to Fix It)
vh (toolbar visible)
Bottom gets cut off
dvh (dynamic)
Fits perfectly always
svh (small/safe)
Accounts for toolbar
Code Examples
.hero {
min-height: 100vh; /* Fallback for older browsers */
min-height: 100dvh; /* Dynamic viewport height */
display: flex;
align-items: center;
justify-content: center;
}
/* Alternative: use svh for guaranteed visible area */
.hero-safe {
min-height: 100svh;
}:root {
--header-height: 4rem; /* 64px */
}
.main-content {
min-height: calc(100vh - var(--header-height));
min-height: calc(100dvh - var(--header-height));
}
/* Sticky sidebar that fills remaining height */
.sidebar {
height: calc(100vh - var(--header-height));
position: sticky;
top: var(--header-height);
overflow-y: auto;
}.scroll-container {
height: 100dvh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.scroll-section {
height: 100dvh;
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
}
/* Each section snaps into place as user scrolls */VH vs Other Height Methods
Frequently Asked Questions
How do I convert px to vh?
Divide the pixel value by the viewport height, then multiply by 100. On a 900px tall viewport, 90px becomes 90 / 900 x 100 = 10vh.
What is 1vh in pixels?
1vh equals 1% of the viewport height. On a 900px screen, 1vh = 9px. On a 1080px screen, 1vh = 10.8px. The value updates live when the window is resized.
When should I use vh units?
Use vh for full-screen hero sections, sticky headers with height calculations, vertical centering, and any layout that needs to fill or relate to the visible screen height.
What is the difference between vh and dvh?
vh uses the initial viewport height and does not change when mobile browser UI appears or disappears. dvh (dynamic viewport height) updates in real time as the mobile address bar shows or hides, giving you the true visible area.
Why does 100vh not work properly on mobile?
Mobile browsers have a toolbar that slides in and out. 100vh equals the height with the toolbar hidden, so content gets cut off when the toolbar is visible. Use 100dvh instead, or use min-height: 100vh with a fallback.
What is the difference between vh, svh, lvh, and dvh?
svh is the smallest possible viewport (toolbar visible). lvh is the largest (toolbar hidden). dvh changes dynamically between the two. vh equals lvh in most browsers. Use dvh for the most accurate current height.
Can I use vh for width?
Yes. vh is a length unit and works for any CSS property. Setting width: 50vh makes an element half the viewport height wide. This is useful for creating squares that are relative to screen height.
How do I create a full-screen section with vh?
Set min-height: 100vh (or 100dvh on mobile). Using min-height instead of height ensures the section can grow if content is taller than the screen, preventing overflow issues.
Is vh supported in all browsers?
Yes. vh has been supported in all major browsers since 2013. The newer dvh, svh, and lvh units are supported in Chrome 108+, Safari 15.4+, and Firefox 101+.
What viewport height should I use for conversion?
Common heights are 900px (desktop), 1024px (tablet portrait), 667px (iPhone SE), and 844px (iPhone 14). Check your analytics to see what screen sizes your users actually have.
Can I combine vh with other units in calc?
Yes. calc(100vh - 4rem) is a common pattern for full-height sections minus a header. You can mix vh with px, rem, em, and other units inside calc().
Should I use vh or percentage for height?
Use vh when you want height relative to the screen. Use percentage when you want height relative to the parent element. For full-screen sections, vh is simpler because percentage requires all parent elements to have explicit heights.
Disclaimer: This tool provides approximate conversions for reference purposes. Results may vary slightly depending on browser rendering, root font size, and viewport settings. Always verify values in your specific development environment.