Skip to main content

​
Overview

Use height utilities to control the vertical size of elements. These utilities work with percentages, viewport units, and auto values to create full-height layouts and consistent component sizing.

​
Height Utilities

Height Properties

.h-full100%height: 100%;Full height
.h-autoAutoheight: auto;Auto height
.h-screen100vhheight: 100vh;Full viewport height

​
Min Height Utilities

Min Height Properties

.min-h-screen100vhmin-height: 100vh;Full viewport height
.min-h-full100%min-height: 100%;Full height

​
Full Height

Use .h-full to make an element take up 100% of its parent container’s height. 
<div class="h-full p-4 bg-blue text-white">
  Full height container
</div>

​
Common Use Cases

  • Full-height sidebars
  • Container elements that need to fill parent
  • Nested layouts
  • Flex containers
<!-- Full-height sidebar -->
<aside class="h-full w-64 p-6 bg-gray-light">
  <nav class="flex flex-col gap-2">
    <a href="#" class="text-gray">Link 1</a>
    <a href="#" class="text-gray">Link 2</a>
  </nav>
</aside>

​
Auto Height

Use .h-auto to let the browser calculate the height based on the element’s content. 
<div class="h-auto p-4 bg-blue text-white">
  Auto height based on content
</div>

​
Common Use Cases

  • Content containers
  • Cards with variable content
  • Elements that should size to content
  • Default behavior for most elements
<!-- Card with auto height -->
<div class="card h-auto p-6">
  <h3 class="text-xl font-semibold mb-4">Card Title</h3>
  <p class="text-gray">Content that determines height</p>
</div>

​
Screen Height

Use .h-screen to make an element take up 100% of the viewport height (100vh). 
<div class="h-screen p-4 bg-blue text-white">
  Full viewport height
</div>

​
Common Use Cases

  • Full-screen hero sections
  • Landing pages
  • Full-viewport layouts
  • Modal overlays
<!-- Full-screen hero -->
<section class="h-screen flex items-center justify-center bg-gray-light">
  <div class="text-center">
    <h1 class="text-5xl font-bold mb-4">Hero Title</h1>
    <p class="text-lg text-gray mb-8">Hero subtitle</p>
    <button class="btn btn-blue">Get Started</button>
  </div>
</section>

​
Min Height Screen

Use .min-h-screen to ensure an element is at least the full viewport height, but can grow taller if content requires it. 
<div class="min-h-screen p-4 bg-blue text-white">
  Minimum full viewport height
</div>

​
Common Use Cases

  • Page layouts that need full height
  • Content areas that should fill viewport
  • Landing pages with variable content
  • Main content areas
<!-- Page layout with min height -->
<main class="min-h-screen p-6">
  <h1 class="text-3xl font-bold mb-6">Page Title</h1>
  <p class="text-gray">Content that may be longer than viewport</p>
</main>

​
Min Height Full

Use .min-h-full to ensure an element is at least 100% of its parent’s height. 
<div class="min-h-full p-4 bg-blue text-white">
  Minimum full parent height
</div>

​
Height Examples

​
Full-Height Layout

<div class="h-screen flex">
  <aside class="w-64 h-full p-6 bg-gray-light">
    <h2 class="text-lg font-semibold mb-4">Sidebar</h2>
    <nav class="flex flex-col gap-2">
      <a href="#" class="text-gray">Link 1</a>
      <a href="#" class="text-gray">Link 2</a>
    </nav>
  </aside>
  <main class="flex-1 h-full p-6 overflow-auto">
    <h1 class="text-3xl font-bold mb-6">Main Content</h1>
    <p class="text-gray">Scrollable content</p>
  </main>
</div>

​
Centered Full-Screen Content

<div class="h-screen flex items-center justify-center">
  <div class="text-center max-w-md">
    <h1 class="text-4xl font-bold mb-4">Welcome</h1>
    <p class="text-lg text-gray mb-8">Your content here</p>
    <button class="btn btn-blue">Get Started</button>
  </div>
</div>

​
Page with Minimum Height

<div class="min-h-screen flex flex-col">
  <header class="p-6 bg-white border-b border-gray-light">
    <h1 class="text-2xl font-bold">Header</h1>
  </header>
  <main class="flex-1 p-6">
    <h2 class="text-3xl font-bold mb-6">Content</h2>
    <p class="text-gray">Page content</p>
  </main>
  <footer class="p-6 bg-gray-light">
    <p class="text-gray">Footer</p>
  </footer>
</div>

​
Full-Height Sidebar

<div class="flex h-screen">
  <aside class="w-64 h-full p-6 bg-gray-light overflow-auto">
    <h2 class="text-lg font-semibold mb-4">Navigation</h2>
    <nav class="flex flex-col gap-2">
      <a href="#" class="p-2 bg-white rounded">Link 1</a>
      <a href="#" class="p-2 bg-white rounded">Link 2</a>
      <!-- More links... -->
    </nav>
  </aside>
  <main class="flex-1 h-full overflow-auto p-6">
    <h1 class="text-3xl font-bold mb-6">Main Content</h1>
    <p class="text-gray">Scrollable main content</p>
  </main>
</div>

​
Best Practices

1

Use Screen Height for Full Views

Use .h-screen for full-viewport layouts like hero sections and landing pages.
2

Use Min Height for Pages

Use .min-h-screen for page layouts that should fill the viewport but can grow taller.
3

Combine with Flexbox

Use height utilities with flexbox for full-height layouts and vertical centering.
4

Consider Overflow

Always consider overflow behavior when using fixed heights, especially with scrollable content.

​
Common Patterns

​
Full-Height Dashboard

<div class="h-screen flex flex-col">
  <header class="p-4 bg-white border-b">Header</header>
  <div class="flex-1 flex overflow-hidden">
    <aside class="w-64 bg-gray-light overflow-auto">Sidebar</aside>
    <main class="flex-1 overflow-auto p-6">Content</main>
  </div>
</div>

​
Hero Section

<section class="h-screen flex items-center justify-center bg-gray-light">
  <div class="text-center">
    <h1 class="text-6xl font-bold mb-4">Hero Title</h1>
    <p class="text-xl text-gray mb-8">Hero subtitle</p>
    <button class="btn btn-blue btn-lg">Call to Action</button>
  </div>
</section>

Width

Control element width

Max Width

Constrain maximum element width

Flexbox

Flexbox utilities for layouts

Sizing

All sizing utilities overview