高さのユーティリティ
h-*で固定の高さを設定し、親要素いっぱいにするにはh-full、ビューポートの高さにはh-screen、自然なサイズにはh-autoを使います。
「高さのユーティリティ」はCoddyKit上の無料Tailwind CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTailwind CSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Tailwind CSS Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
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.
よくある質問
「高さのユーティリティ」レッスンは無料ですか？
はい。「高さのユーティリティ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Tailwind CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Tailwind CSS Academyコースには全4レッスンが含まれています。
「高さのユーティリティ」で何を学びますか？
h-*で固定の高さを設定し、親要素いっぱいにするにはh-full、ビューポートの高さにはh-screen、自然なサイズにはh-autoを使います。 ブラウザで直接実行するハンズオンコードでTailwind CSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Tailwind CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTailwind CSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「高さのユーティリティ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTailwind CSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのTailwind CSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 幅のユーティリティ
- 高さのユーティリティ
- 最小・最大サイズの制約
- アスペクト比