height
Set physical height with definite, percentage or content-based values.
Overview
| Class | Declarations |
|---|---|
h:100% | height: 100%;
|
h:fit-content | height: fit-content;
|
h:min-content | height: min-content;
|
h:max-content | height: max-content;
|
h-3xs | height: var(--container-3xs);
|
h-2xs | height: var(--container-2xs);
|
h-xs | height: var(--container-xs);
|
h-sm | height: var(--container-sm);
|
h-md | height: var(--container-md);
|
h-lg | height: var(--container-lg);
|
h-xl | height: var(--container-xl);
|
h-2xl | height: var(--container-2xl);
|
h-3xl | height: var(--container-3xl);
|
h-4xl | height: var(--container-4xl);
|
h-5xl | height: var(--container-5xl);
|
h-6xl | height: var(--container-6xl);
|
h-7xl | height: var(--container-7xl);
|
h:<size> | height: <size>;
|
Examples
Set a fixed height
h:* sets the physical height. Here h:3rem makes the border box 48px tall, including its padding. Use a fixed height when the amount of visible content is intentionally bounded.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="h:3rem p-sm">48px tall</div></div>A fixed height does not clip excess content by itself. Use min-height when the region should grow, or choose an explicit overflow policy.
Fill a parent height
h:100% is height:100%. In ordinary block flow, it fills a definite parent height. Compare a 160px parent with an automatic-height parent: the latter child follows its content instead of inventing a 160px reference.
<!-- Definite parent · 160px --><div id="layout" class="h:10rem w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="h:100% p-sm leading:20px">One line</div></div><!-- Automatic parent --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="h:100% p-sm leading:20px">One line</div></div>Percentage heights depend on the containing block and layout mode. A parent’s content-driven height is not a definite percentage reference in this normal-flow example.
Use viewport and intrinsic values
Viewport units refer to the actual browsing context. This iframe is 320px tall, so h:50dvh produces 160px. The second panel uses h:fit-content and follows two lines of content instead.
<!-- Half the real viewport --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="h:50dvh p-sm">50dvh</div></div><!-- Content height --><div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="h:fit-content p-sm leading:20px">First line<br />Second line</div></div>The iframe keeps a fixed height so its contents cannot change the viewport unit being demonstrated. dvh follows dynamic viewport height; vh uses the large viewport height on current browsers.
Size both axes together
For a fixed square control, size sets width and height together. This native button is 40 × 40px and has the accessible name “Add layer”.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <button id="target" class="grid place-items:center width:2.5rem height:2.5rem round p:0 border-width:0" type="button" aria-label="Add layer"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg></button></div>Apply conditionally
Resize past sm to change the panel from 48px to 80px high. Its width and content remain the same; the condition changes the actual CSS height.
<div id="layout" class="w:17.5rem max-w:100%" role="group" aria-label="Available space"> <div id="target" class="h:3rem p-sm h:5rem@sm">Responsive height</div></div>