Height Utilities
Control height with h-* fixed values, h-full to fill parent, h-screen for viewport height, and h-auto for natural sizing.
Height Utilities is a free Tailwind CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The h-* Family of Utilities
Height utilities in Tailwind mirror the width system. The h-* prefix controls how tall an element is, with values drawn from the same spacing scale, fractional sizes, and semantic keywords you already know from w-*. Unlike widths, heights behave differently in CSS because block elements are typically as tall as their content by default — so explicit height utilities are used more selectively.
<!-- Height examples -->
<div class="flex gap-4 items-end">
<div class="w-16 h-8 bg-blue-200 rounded">h-8</div>
<div class="w-16 h-16 bg-blue-300 rounded">h-16</div>
<div class="w-16 h-32 bg-blue-400 rounded">h-32</div>
<div class="w-16 h-48 bg-blue-500 rounded">h-48</div>
</div>Fixed Heights With the Spacing Scale
Fixed heights follow the same 4px-per-unit spacing scale as widths. h-4 is 16px, h-12 is 48px, and h-96 is 384px. Common uses include button heights (h-10 or h-12), avatar sizes (h-8 w-8), and divider lines (h-px for a 1px line). Pairing h-* with w-* of the same value gives you perfect squares.
<!-- Square avatar shapes using equal h and w -->
<div class="flex gap-4">
<div class="h-10 w-10 rounded-full bg-emerald-400 flex items-center justify-center text-white text-sm">SM</div>
<div class="h-14 w-14 rounded-full bg-emerald-500 flex items-center justify-center text-white">MD</div>
<div class="h-20 w-20 rounded-full bg-emerald-600 flex items-center justify-center text-white">LG</div>
</div>h-full to Fill the Parent
h-full sets an element's height to 100% of its parent. For this to work, the parent must have an explicit height. This is commonly used for sticky sidebars, hero images, or making cards in a flex row all stretch to the same height. Without an explicit height on the parent, h-full has no effect since percentage heights require a sized ancestor.
<!-- Sidebar fills the full height of its container -->
<div class="flex h-64">
<aside class="w-48 h-full bg-gray-800 text-white p-4">
Sidebar (h-full)
</aside>
<main class="flex-1 bg-gray-50 p-4">
Main content (natural height)
</main>
</div>h-screen and h-dvh
h-screen sets height to 100vh (100% of the viewport height), useful for full-screen hero sections and app shells. On mobile browsers, the address bar can cause 100vh to overflow. The modern fix is h-dvh (100dvh — dynamic viewport height), which Tailwind v3.4+ supports and which automatically accounts for collapsing browser UI elements.
<!-- Classic full-screen hero section -->
<section class="h-screen bg-gradient-to-br from-indigo-600 to-purple-700 flex items-center justify-center">
<div class="text-center text-white">
<h1 class="text-5xl font-bold mb-4">Welcome</h1>
<p class="text-xl opacity-80">A full-viewport hero section</p>
</div>
</section>h-auto for Content-Driven Height
h-auto returns an element to its natural, content-driven height after you may have set a fixed or percentage height at a smaller breakpoint. For example, h-48 md:h-auto gives a card a fixed height on mobile (good for image thumbnails in a grid) but lets it breathe naturally on desktop where content length can vary without looking awkward.
<!-- Fixed height on mobile, auto on desktop -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="h-40 md:h-auto bg-teal-100 p-4 rounded overflow-hidden">
This content is clipped on mobile but shows fully on desktop.
It may have variable amounts of text.
</div>
<div class="h-40 md:h-auto bg-teal-100 p-4 rounded overflow-hidden">Short text</div>
<div class="h-40 md:h-auto bg-teal-100 p-4 rounded overflow-hidden">Medium text here</div>
</div>h-px for Hairline Dividers
h-px sets height to exactly 1px, making it perfect for horizontal dividers and separator lines. Combined with w-full bg-gray-200, it creates a clean divider that fits the design system without needing a custom CSS class. You can also use h-0.5 for a 2px line when 1px feels too thin on high-DPI displays.
<!-- Section dividers using h-px and h-0.5 -->
<div class="space-y-4">
<p class="text-gray-700">Content above the divider</p>
<div class="h-px w-full bg-gray-300"></div>
<p class="text-gray-700">Content below the divider</p>
<div class="h-0.5 w-full bg-gray-200"></div>
<p class="text-gray-700">More content</p>
</div>h-fit, h-min, and h-max
Like their width counterparts, h-fit sizes an element to fit its content, h-min uses the minimum content height, and h-max uses the maximum content height. These are less commonly needed than their width equivalents because height is typically content-driven anyway. The key use case is when an element has been given a fixed or percentage height and you need to escape back to content sizing at a specific breakpoint.
<!-- h-fit useful when resetting an explicitly set height -->
<div class="flex gap-4">
<!-- Card with a fixed minimum height on mobile -->
<div class="h-32 sm:h-fit bg-purple-100 p-4 rounded w-40">
<p>This card has fixed height on mobile</p>
<p class="hidden sm:block">And shows all this text on larger screens</p>
</div>
</div>Fractional Heights
Like widths, heights can use fractional values: h-1/2, h-1/3, h-2/3, h-1/4, and h-3/4. These are percentage values relative to the parent container's height. This works well inside fixed-height containers like a card, panel, or app shell section where you want child elements to take up a defined fraction of the available vertical space.
<!-- Image takes top half, content takes bottom half -->
<div class="h-64 bg-white rounded-lg shadow overflow-hidden">
<div class="h-1/2 bg-gradient-to-r from-blue-400 to-purple-500">
<!-- Image placeholder -->
</div>
<div class="h-1/2 p-4">
<h3 class="font-bold">Card Title</h3>
<p class="text-sm text-gray-600">Card description text here.</p>
</div>
</div>Overflow and Height Clipping
When content is taller than the defined height, it overflows by default. Pair height utilities with overflow-hidden to clip content, overflow-y-auto to add a scroll bar only when needed, or overflow-y-scroll to always show the scroll bar. This is essential for scrollable sidebars, chat windows, and fixed-height code blocks.
<!-- Scrollable content panel with fixed height -->
<div class="h-48 overflow-y-auto border border-gray-200 rounded p-4">
<p class="mb-3">Line 1 of content</p>
<p class="mb-3">Line 2 of content</p>
<p class="mb-3">Line 3 of content</p>
<p class="mb-3">Line 4 — now we scroll</p>
<p class="mb-3">Line 5</p>
<p class="mb-3">Line 6</p>
<p>Line 7 of scrollable content</p>
</div>Min and Max Height Overview
Use min-h-* to ensure an element is never shorter than a value, and max-h-* to cap how tall it can grow. min-h-screen is a common pattern for page-level layouts that should fill the viewport even when content is short. max-h-64 with overflow-y-auto is standard for dropdown menus and select lists that should not grow too tall.
<!-- Page fills screen height, content area scrolls if needed -->
<div class="min-h-screen flex flex-col">
<header class="bg-gray-900 text-white p-4">Header</header>
<main class="flex-1 p-6 bg-gray-50">
<!-- flex-1 makes this grow to fill remaining height -->
<p>Page content</p>
</main>
<footer class="bg-gray-200 p-4 text-center">Footer</footer>
</div>Height in Real Layouts
Here is a practical card component showing height utilities in action. The card has a fixed thumbnail height, a flexible content area, and a fixed-height footer with an action button. This pattern is common in product listings and blog index pages where visual consistency between cards of varying content length is critical.
<div class="flex flex-col bg-white rounded-xl shadow overflow-hidden w-64">
<!-- Thumbnail: fixed height -->
<div class="h-40 bg-gradient-to-br from-sky-400 to-blue-600"></div>
<!-- Content: grows to fill available space -->
<div class="flex-1 p-4">
<h3 class="font-bold text-gray-900 mb-1">Product Name</h3>
<p class="text-sm text-gray-500">Brief product description here.</p>
</div>
<!-- Footer: fixed height with border -->
<div class="h-14 border-t flex items-center px-4">
<button class="ml-auto bg-blue-500 text-white text-sm px-3 py-1 rounded">
Buy Now
</button>
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: h-* fixed utilities follow the same spacing scale as w-*, h-screen fills the viewport height and h-dvh is the mobile-safe modern alternative, and min-h-screen with flex-col and flex-1 creates sticky footer layouts. Next up we explore min and max constraint utilities for both width and height.
Frequently asked questions
Is the “Height Utilities” lesson free?
Yes — the full text of “Height Utilities” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Height Utilities”?
Control height with h-* fixed values, h-full to fill parent, h-screen for viewport height, and h-auto for natural sizing. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Tailwind CSS Academy?
No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Height Utilities” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Tailwind CSS Academy lesson?
Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Width Utilities
- Height Utilities
- Min and Max Constraints
- Aspect Ratio