Tailwind UI Pattern Registry for humans and agents

viewport mobile height svh dvh lvh responsive hero sticky

Viewport-Safe Heights

Fetch snippet JSON: curl https://webspire.de/snippets/layout/viewport-safe.json
Format
Preview
Stage Background

Details

Tailwind
v4.x
Browser
baseline-2023
Size
873 bytes · 44 lines
Classes
.h-safe.h-dynamic.h-full-screen.min-h-safe.min-h-dynamic.min-h-full-screen
viewport mobile height svh dvh lvh responsive hero sticky

100vh is broken on mobile — browser UI (address bar, navigation chrome) is ignored, so full-height elements get clipped and bottom buttons end up behind the UI. CSS solved this cleanly with three new viewport unit types.

Each class pairs a 100vh fallback with the right modern unit. Old browsers see 100vh; modern browsers use the accurate value. No JavaScript needed.

Which class to use

| Class | Unit | When to use | |---|---|---| | .h-safe | svh | Element must always be fully visible — sticky headers/footers, cookie banners, floating action buttons | | .h-dynamic | dvh | Hero sections, app layouts, scroll containers — updates live as browser UI appears/disappears | | .h-full-screen | lvh | Modals, overlays — use the maximum possible screen area |

If unsure → .h-safe (small viewport, nothing gets clipped).

Hero section

<section class="h-dynamic flex flex-col items-center justify-center">
  <h1>Above the fold, on every device</h1>
</section>
<footer class="h-safe flex items-center justify-between px-6">
  <span>Cookie consent</span>
  <button>Accept</button>
</footer>

Full-screen modal

<div role="dialog" class="h-full-screen w-full fixed inset-0 bg-black/60">
  <!-- modal content -->
</div>

Tailwind note: Tailwind v4 has h-svh, h-dvh, h-lvh but they don’t include the 100vh fallback. These classes add the fallback cascade for broader compatibility.