Min-Height

Sets the minimum height an element can have, ensuring it doesn't become shorter than the specified value. Min-height is essential for responsive designs where you need to establish a baseline height for elements regardless of their content. This is particularly useful for maintaining the visual integrity of UI components when content is sparse.

Sizing1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="space-y-4">
  <div class="min-h-0 bg-blue-100 p-2">min-h-0 (no minimum height)</div>
  <div class="min-h-full bg-blue-200 p-2">min-h-full (100% of parent's height, if parent has explicit height)</div>
  <div class="min-h-screen bg-blue-300 p-2">min-h-screen (100vh, full viewport height)</div>
  <div class="min-h-[200px] bg-blue-400 p-2 text-white">min-h-[200px] (custom minimum height)</div>
</div>

Examples

Different min-height values

<div class="space-y-4">
  <div class="min-h-0 bg-blue-100 p-2">min-h-0 (no minimum height)</div>
  <div class="min-h-full bg-blue-200 p-2">min-h-full (100% of parent's height, if parent has explicit height)</div>
  <div class="min-h-screen bg-blue-300 p-2">min-h-screen (100vh, full viewport height)</div>
  <div class="min-h-[200px] bg-blue-400 p-2 text-white">min-h-[200px] (custom minimum height)</div>
</div>

Edit in playground

Hero section with minimum viewport height for visual impact

<!-- Hero section with minimum height -->
<section class="min-h-[50vh] bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center text-white p-8">
  <div class="max-w-3xl text-center">
    <h1 class="text-4xl font-bold mb-4">Welcome to Our Platform</h1>
    <p class="text-xl mb-8">This hero section has a minimum height of 50% of the viewport, ensuring it has visual impact even on large screens.</p>
    <div class="flex flex-wrap justify-center gap-4">
      <button class="px-6 py-3 bg-white text-blue-600 rounded-lg font-bold">Get Started</button>
      <button class="px-6 py-3 bg-transparent border-2 border-white rounded-lg font-bold">Learn More</button>
    </div>
  </div>
</section>

Edit in playground

Cards with minimum height that can still expand for larger content

<!-- Cards with minimum height -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <div class="min-h-[200px] bg-white rounded-lg shadow-md p-4 flex flex-col">
    <h3 class="font-bold text-lg mb-2">Card 1</h3>
    <p>Short content that doesn't fill the card.</p>
    <div class="mt-auto pt-4">
      <button class="px-4 py-2 bg-blue-600 text-white rounded-lg w-full">Action</button>
    </div>
  </div>
  <div class="min-h-[200px] bg-white rounded-lg shadow-md p-4 flex flex-col">
    <h3 class="font-bold text-lg mb-2">Card 2</h3>
    <p>This card has more content that would naturally make it taller than Card 1. The min-height ensures a minimum size, but allows expansion for larger content.</p>
    <div class="mt-auto pt-4">
      <button class="px-4 py-2 bg-blue-600 text-white rounded-lg w-full">Action</button>
    </div>
  </div>
  <div class="min-h-[200px] bg-white rounded-lg shadow-md p-4 flex flex-col">
    <h3 class="font-bold text-lg mb-2">Card 3</h3>
    <p>Medium amount of content.</p>
    <div class="mt-auto pt-4">
      <button class="px-4 py-2 bg-blue-600 text-white rounded-lg w-full">Action</button>
    </div>
  </div>
</div>

Edit in playground

App layout with minimum screen height to ensure footer positioning

<!-- Responsive app layout with minimum height -->
<div class="min-h-screen flex flex-col bg-gray-100">
  <header class="bg-white shadow-sm p-4">
    <div class="max-w-7xl mx-auto flex justify-between items-center">
      <h1 class="font-bold text-lg">App Name</h1>
      <button class="p-2 bg-gray-200 rounded-full">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
        </svg>
      </button>
    </div>
  </header>
  
  <main class="flex-grow p-4 flex items-center justify-center">
    <div class="max-w-md w-full bg-white rounded-lg shadow-md p-6">
      <h2 class="text-xl font-bold mb-4">Content Area</h2>
      <p>This area will always be tall enough to push the footer to the bottom, even if there isn't much content.</p>
      <p class="mt-4">The min-h-screen on the wrapper combined with flex-grow on this main content area creates a layout where the footer is always at the bottom of the viewport or below if content pushes it down.</p>
    </div>
  </main>
  
  <footer class="bg-white border-t p-4 text-center text-gray-600">
    <p>&copy; 2025 Example Company</p>
  </footer>
</div>

Edit in playground

Live Preview

Try the Min-Height utility with different values

Open Interactive Playground

Variants

min-h-0: no minimum height; min-h-full: 100% of parent height (if parent has explicit height); min-h-screen: 100vh (full viewport height); min-h-min: min-content height; min-h-max: max-content height; min-h-fit: fit-content height; arbitrary values can be specified with min-h-[200px] syntax

0fullscreenminmaxfit