What Are CSS Viewport Units (vh, vw, dvh, svh, lvh)?
Learn how vh, dvh, svh, and lvh differ, why 100vh breaks on mobile browsers, and which viewport unit to use for full-screen layouts.
Expected Interview Answer
CSS viewport units size elements relative to the browser viewport — vw and vh are percentages of the initial viewport width/height, while the newer dvh, svh, and lvh variants exist specifically to handle mobile browsers whose visible viewport height changes as address bars and toolbars show or hide.
1vw equals 1% of the viewport width and 1vh equals 1% of the viewport height, but on mobile browsers the classic vh is notoriously unreliable because it is calculated against the largest possible viewport, so a 100vh element can overflow below the visible area when the browser chrome (address bar, tab bar) is showing, causing the well-known mobile Safari jump-scroll bug. The dynamic viewport units (dvh, dvw) update live as the browser chrome shows or hides, always matching what is actually visible right now. The small viewport units (svh, svw) assume the browser chrome is always visible (the smallest possible viewport), and the large viewport units (lvh, lvw) assume it is always hidden (the largest possible viewport) — svh is the safe choice for guaranteeing an element never gets cut off, while dvh is the choice for filling exactly the currently visible area and reacting live as chrome toggles. There are also vmin and vmax, which resolve to the smaller or larger of vw/vh respectively, useful for square or aspect-locked elements that must fit within the smaller viewport dimension.
- dvh fixes the classic mobile 100vh-overflows-under-the-address-bar bug
- svh guarantees content fits within the guaranteed-visible viewport at all times
- lvh matches the maximum possible viewport, useful for background fills
- vmin/vmax let elements scale relative to whichever viewport dimension is smaller or larger
AI Mentor Explanation
Classic vh is like measuring the boundary rope’s distance using the stadium’s maximum possible capacity diagram, even on a day when temporary stands are folded away and the real playing area is smaller — the measurement can be wrong for what fans actually see today. Small viewport units (svh) are like always measuring against the stands folded in, the safest guaranteed-visible boundary. Dynamic viewport units (dvh) are like a live measurement that updates the moment stands are extended or retracted mid-match. That live-versus-fixed-versus-safest measurement distinction is exactly the difference between dvh, svh, and lvh.
Step-by-Step Explanation
Step 1
Identify the layout problem
A full-height mobile element using 100vh overflows under the address bar because vh uses the largest viewport.
Step 2
Choose the right unit for the goal
Use dvh for a live-updating exact fit, svh for a guaranteed never-clipped minimum, lvh for a maximum fill.
Step 3
Apply the unit
Replace height: 100vh with height: 100dvh (or svh) on the target element.
Step 4
Verify with fallbacks
Provide a vh fallback for older browsers, since dvh/svh/lvh require modern browser support.
What Interviewer Expects
- Correct explanation of why classic vh misbehaves on mobile browsers
- Clear distinction between dvh (live), svh (smallest/safe), and lvh (largest)
- Ability to pick the right unit for a real full-screen mobile layout bug
- Awareness of vmin/vmax as the smaller/larger of vw and vh
Common Mistakes
- Using 100vh for full-screen mobile layouts and not knowing why content gets cut off
- Confusing svh (small/safe) with dvh (dynamic/live) or lvh (large)
- Forgetting that dvh recalculates on scroll as chrome shows/hides, which can cause layout shift if used carelessly
- Not providing a vh fallback for browsers lacking dynamic viewport unit support
Best Answer (HR Friendly)
“On mobile, a plain 100vh often gets you a layout that is taller than what you can actually see, because the browser’s address bar changes the visible area. Newer units like dvh update live to match what is really visible, and svh gives you a safe minimum that never gets clipped, so I use those instead of plain vh for full-screen mobile sections.”
Code Example
.hero {
/* fallback for browsers without dvh support */
height: 100vh;
/* live-updating exact fit, avoids address-bar overflow */
height: 100dvh;
}
.always-fits {
/* guaranteed never clipped, uses smallest possible viewport */
min-height: 100svh;
}
.square-badge {
/* scales to the smaller of viewport width/height */
width: 20vmin;
height: 20vmin;
}Follow-up Questions
- Why does 100vh cause content to be cut off on mobile Safari specifically?
- What is the practical difference between svh and lvh?
- When would you deliberately choose lvh over dvh?
- How do vmin and vmax differ from vw and vh?
MCQ Practice
1. Why does 100vh often overflow the visible area on mobile browsers?
Classic vh uses the largest possible viewport size, so content can extend beneath the address bar that is currently visible.
2. What does dvh (dynamic viewport height) do differently from vh?
dvh recalculates dynamically as the actual visible viewport changes, unlike the static classic vh.
3. Which unit guarantees content is never clipped by assuming browser chrome is always visible?
svh (small viewport height) assumes the smallest possible viewport, the safest choice against clipping.
Flash Cards
Why is 100vh unreliable on mobile? — It is based on the largest possible viewport, ignoring visible browser chrome, causing overflow.
What does dvh do? — Updates live to match the currently visible viewport as chrome shows/hides.
What does svh guarantee? — Content fits within the smallest possible (safest, always-visible) viewport.
What do vmin/vmax resolve to? — The smaller (vmin) or larger (vmax) of the current vw and vh values.