Tailwind CSS - Min Height

Modern Tailwind CSS: Min-Height

The min-h-* utilities set the minimum height of an element. This ensures that an element will not become smaller than the specified value, even if its content is smaller. It’s essential for creating robust layouts, like footers that stick to the bottom of the viewport.

Common Min-Height Utilities

Tailwind provides a comprehensive set of min-height utilities out of the box.

Class	CSS Properties
min-h-0	min-height: 0px;
min-h-full	min-height: 100%;
min-h-screen	min-height: 100vh;
min-h-min	min-height: min-content;
min-h-max	min-height: max-content;
min-h-fit	min-height: fit-content;

Tailwind also includes a numeric scale (e.g., min-h-4, min-h-16, min-h-px) and dynamic viewport height units like min-h-svh (Smallest Viewport Height), min-h-lvh (Largest Viewport Height), and min-h-dvh (Dynamic Viewport Height) to handle mobile browser UI elements.

Practical Use Case: Sticky Footer

A classic layout problem is a footer that hangs in the middle of the page when content is short. By setting the main content wrapper to min-h-screen, we force it to take up at least the full height of the viewport, pushing the footer down.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Sticky Footer Example</title>
</head>
<body class="bg-slate-100 text-slate-900">

  <!-- The flex container takes up at least the full screen height -->
  <div class="flex flex-col min-h-screen">

    <header class="bg-white shadow p-4">
      <h1 class="font-bold">My Website</h1>
    </header>

    <!-- The main content area grows to fill available space -->
    <main class="flex-grow p-8">
      <h2 class="text-2xl font-semibold">Page Content</h2>
      <p>This content is short, but the footer will still be at the bottom.</p>
    </main>

    <footer class="bg-slate-800 text-white p-4 text-center">
      Copyright &copy; 2024
    </footer>

  </div>

</body>
</html>

Advanced Usage

Conditional and Responsive Min-Height

You can apply min-height utilities conditionally using state variants (hover:, focus:) and responsive breakpoints (sm:, md:, lg:).

<!-- Starts at min-h-24, grows to min-h-48 on hover -->
<div class="min-h-24 hover:min-h-48 transition-all duration-300 ...">Hover me</div>

<!-- Is min-h-48 on small screens, and min-h-64 on medium screens and up -->
<div class="min-h-48 md:min-h-64 ...">...</div>

Using Arbitrary Values

If the built-in values aren’t sufficient, you can use arbitrary values directly in your HTML. This is a powerful feature of modern Tailwind CSS.

<!-- Set a very specific minimum height -->
<div class="min-h-[155px] bg-sky-200">...</div>

<!-- Use a CSS variable -->
<div class="min-h-[var(--my-custom-height)] bg-teal-200">...</div>

<!-- Use calc() for dynamic calculations -->
<div class="min-h-[calc(100vh-4rem)] bg-indigo-200">...</div>

Extending Your Configuration

While arbitrary values are great, if you frequently use a specific value, you can add it to your tailwind.config.js file for reuse. For example, to add fractional min-heights:

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      minHeight: {
        '1/2': '50%',
        '1/3': '33.333333%',
        '2/3': '66.666667%',
        '1/4': '25%',
      }
    }
  },
  plugins: [],
}