Tailwind Height Utilities

What Are Height Utilities?

h-* utilities map to the CSS height property, mirroring the width system: fixed scale values, fractions, percentages, and viewport-relative keywords like h-screen (100vh).

Height is trickier than width in CSS because percentage-based heights depend on an ancestor having an explicit height, something percentage-based widths don't require in the same way.

<div class="flex h-screen flex-col">
  <header class="h-16 bg-slate-900 text-white">Header</header>
  <main class="flex-1 overflow-y-auto p-6">Scrollable main content</main>
</div>

h-screen makes the outer wrapper exactly the viewport height, and flex-1 lets the main area fill remaining space.

Height Utility Syntax

class="h-64"        /* fixed scale value */
class="h-screen"    /* 100vh */
class="h-full"      /* 100% of parent */
class="min-h-screen max-h-96"

• h-{n} uses the numeric spacing scale for fixed heights.
• h-full sets height to 100% of the parent, which requires the parent to have a defined height.
• h-screen sets height to 100% of the viewport (100vh), independent of any parent.
• min-h-* and max-h-* constrain height within a flexible range.

Height Utilities Cheatsheet

Common height patterns for full-page and constrained layouts.

h-screen vs min-h-screen

h-screen fixes an element to exactly the viewport height, clipping or scrolling content that doesn't fit. min-h-screen guarantees at least the viewport height but allows the element to grow taller if its content needs more room, which is almost always the safer choice for full-page wrappers.

<!-- Risky: content taller than the viewport gets clipped or forces internal scroll -->
<div class="h-screen">...</div>

<!-- Safer: page wrapper is always at least full height, but can grow -->
<div class="min-h-screen flex flex-col">
  <main class="flex-1">Page content of any length</main>
</div>

Why h-full Sometimes Does Nothing

h-full sets height: 100%, but percentages resolve against the parent's height. If the parent's height is auto (based on its own content), h-full on the child has no effect, since there's no fixed reference to calculate 100% from.

<!-- Doesn't work: parent has no explicit height -->
<div>
  <div class="h-full bg-blue-100">Height has no effect here</div>
</div>

<!-- Works: parent has an explicit height -->
<div class="h-64">
  <div class="h-full bg-blue-100">Fills the 16rem parent exactly</div>
</div>

Building a Sticky App Shell Layout

Combining min-h-screen, flex flex-col, and flex-1 on the main content area creates the classic "header, growing content, footer pinned to bottom" layout, even on pages with very little content.

<div class="flex min-h-screen flex-col">
  <header class="p-4">Header</header>
  <main class="flex-1 p-4">Main content grows to fill space</main>
  <footer class="p-4">Footer stays at the bottom</footer>
</div>

Common Mistakes

• Using h-full on a child whose parent has no explicit height, expecting it to fill the viewport instead.
• Using h-screen for a page wrapper and then being surprised when long content gets clipped or scrolls internally.
• Forgetting flex flex-col on the outer wrapper when trying to pin a footer to the bottom of a short page.
• Not accounting for mobile browser chrome (address bars) shrinking the effective viewport height differently from 100vh.
• Mixing h-screen and min-h-screen inconsistently across a project's layout components.

Key Takeaways

• Height utilities mirror the width system: fixed values, percentages, and viewport-relative keywords.
• h-full requires an ancestor with an explicit height to have any visible effect.
• min-h-screen is usually safer than h-screen for full-page wrappers, since it allows growth.
• flex flex-col with flex-1 on the main area is the standard sticky-footer app shell pattern.
• Percentage-based heights behave differently from percentage-based widths due to how CSS resolves them.