Height

Height utilities control how tall an element can be, how it responds to its parent, and how it behaves across responsive breakpoints.

Use them for full-screen sections, fixed-height panels, media previews, scrollable areas, equal-height cards, dashboard shells and responsive vertical layouts.

Quick reference

Usage

Use height utilities directly on any element.

<div class="h-full">
  Full height element
</div>

<section class="min-h-screen">
  Full screen section
</section>

<div class="h-64">
  Fixed height panel
</div>

Height utilities work best when combined with layout utilities such as is-flex, is-grid, place-center, overflow-y-auto, flex-1 and min-h-0.

Core height

Core utilities cover common native CSS height values.

<section class="h-screen is-flex place-center">
  Full screen hero
</section>

<div class="h-fit">
  Content-sized panel
</div>

Viewport height

h-screen, min-h-screen and max-h-screen use both 100vh and 100dvh.

.h-screen {
  height: 100vh;
  height: 100dvh;
}

.min-h-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

.max-h-screen {
  max-height: 100vh;
  max-height: 100dvh;
}

100vh provides broad fallback behavior. 100dvh improves viewport handling on modern mobile browsers where the browser UI can change the visible viewport height.

Min and max height

Min and max height utilities are useful for full-height layouts, scroll regions and overflow control.

<section class="min-h-screen is-flex place-center">
  Full screen section
</section>

<div class="h-screen is-flex flex-col">
  <header class="h-16">Header</header>
  <main class="min-h-0 flex-1 overflow-y-auto">
    Scrollable content
  </main>
</div>

Fixed height scale

Fixed height utilities are useful for icons, avatars, media previews, cards, panels, skeletons and controlled UI surfaces.

<div class="is-flex align-items-center gap-3">
  <div class="h-12 w-12">Icon</div>
  <div class="h-64">Preview</div>
</div>

Max height scale

Max height utilities limit vertical growth and are useful for scrollable panels, dropdowns, code blocks, lists and modal bodies.

<div class="max-h-64 overflow-y-auto">
  Scrollable content
</div>

Fractional heights

Fractional height utilities map common layout fractions to percentages. They are useful when the parent has a defined height.

<div class="h-64">
  <div class="h-1fr2">
    Half height
  </div>
</div>

Full screen hero

Use min-h-screen instead of h-screen when content may grow.

<section class="min-h-screen is-flex place-center">
  <div>
    <h1>Build modern interfaces faster.</h1>
    <p>FrontAlign keeps the section full-height while allowing content to grow.</p>
  </div>
</section>

Media preview

Use fixed heights for media and preview panels.

<div class="h-64 is-flex place-center">
  Preview
</div>

Scrollable panel

Use max-height with overflow utilities for contained scroll areas.

<div class="max-h-64 overflow-y-auto">
  Long content
</div>

Equal height cards

Use Grid or Flexbox with height utilities to create consistent card previews.

<div class="is-grid grid-cols-3 gap-4">
  <article class="h-48">Card</article>
  <article class="h-48">Card</article>
  <article class="h-48">Card</article>
</div>

Dashboard shell

Use min-h-0 when a nested area should be allowed to shrink and scroll inside a fixed-height layout.

<div class="h-screen is-flex flex-col">
  <header class="h-16">Header</header>

  <main class="min-h-0 flex-1 overflow-y-auto">
    Scrollable content
  </main>
</div>

Responsive Class Reference

Responsive variants are mobile-first. A base height applies immediately. A responsive height applies from its breakpoint and above.

<div class="h-auto md:h-full">
  Responsive height
</div>

Height vs min-height

Use height when the element should have a fixed or strict height. Use min-height when the element should be at least a certain height but can grow with content.

Notes

• Use h-screen for strict viewport-height sections.
• Use min-h-screen when content may grow beyond the viewport.
• Use max-h-* with overflow-y-auto for scrollable panels.
• Use min-h-0 to fix overflow inside Flexbox and Grid children.
• Fractional height utilities require the parent to have a defined height.
• Responsive height variants follow FrontAlign's mobile-first breakpoint system.