Which unit for sticky footer?

dvh for full-height columns; safe-area on fixed bottom bars.

Do all browsers support dvh?

Modern mobile and desktop browsers do, so keep 100vh as fallback.

Avoid vw alone. Use clamp() with rem base for accessible type scaling.

Dynamic viewport height tracks visible area.

Hero

min-height: 70dvh

Resize on mobile to see chrome effect vs vh.

.hero {
  min-height: 100vh; /* fallback */
  min-height: 100dvh;
}

Keep content clear of notches and home indicators.

Safe bar

Respects safe areas

Padding uses env(safe-area-inset-*).

.bar {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

Small vs large viewport when UI chrome toggles.

Compare

svh

lvh

Side-by-side unit comparison (desktop approximates).

.panel-s { min-height: 40svh; }
.panel-l { min-height: 40lvh; }

Which unit for sticky footer?: dvh for full-height columns; safe-area on fixed bottom bars.
Do all browsers support dvh?: Modern mobile and desktop browsers do, so keep 100vh as fallback.
vw for font size?: Avoid vw alone. Use clamp() with rem base for accessible type scaling.