responsive/dynamic-viewport-units

Why

On mobile browsers 100vh equals the viewport with the address bar hidden, so a full-height hero or a sticky footer is cut off or jumps when the bar shows.

Fix

Use min-height: 100dvh (follows the visible area) or 100svh (the smallest, stable value). Keep a 100vh line before it only if you support browsers without the new units. With Tailwind, use min-h-dvh or min-h-svh instead of min-h-screen.

Examples

/* bad */
.hero { min-height: 100vh; }
/* good */
.hero { min-height: 100svh; }

Sources

• web.dev, The large, small, and dynamic viewport units
• MDN, CSS length units (viewport units)
• Tailwind CSS, height (h-dvh and h-svh)

Read it in the terminal

npx github:dawidolko/frontend-skills explain responsive/dynamic-viewport-units