Modern viewport units: dvh, svh, lvh

The "vh" you knew was lying

.hero { height: 100vh; }

On mobile, the browser bar shrinks/expands as you scroll. 100vh represents the LARGEST possible viewport (browser bar collapsed). Initial load shows the hero with the URL bar visible, your "100vh" hero is taller than the screen, content gets cut off.

The three new units (2022+)

.hero-small { height: 100svh; }    /* SMALL viewport — when URL bar is visible */
.hero-large { height: 100lvh; }    /* LARGE viewport — when URL bar is hidden */
.hero-dynamic { height: 100dvh; }  /* DYNAMIC — changes as URL bar changes */

• `svh` — guaranteed minimum. The hero ALWAYS fits the visible viewport, even when URL bar shows. Safest for "above the fold" content.
• `lvh` — maximum. Equivalent to old vh. Use when you don't care about scrolling.
• `dvh` — animated. As the browser bar collapses, 100dvh grows. Smooth resize. Use sparingly (triggers layout shifts).

For hero blocks: min-height: 100svh is the modern default. Always-visible, no clipping.

Other axis-versions

• vw / svw / lvw / dvw — width versions (rarely matter; horizontal browser chrome doesn't shift).
• vmin / vmax — pick the smaller / larger dimension. 50vmin on landscape = 50% of height; on portrait = 50% of width.

Quick mobile fix

If your existing site uses 100vh heroes and gets clipped on mobile:

.hero {
  min-height: 100vh;       /* old, fallback */
  min-height: 100svh;      /* new, takes precedence in supporting browsers */
}

Two-line patch.