min-height

Setting the minimum height of an element.

Overview

Examples

Set a baseline height

Use min-h:* when content may grow but the region still needs a minimum block size.

<section class="min-h:48x">    ...</section>

@layer utilities {    .min-h\:48x {        min-height: 12rem    }}

Build viewport sections

Use native viewport units for full-screen or near full-screen layouts.

<main class="min-h:100dvh">    ...</main>

100dvh follows the dynamic viewport size on modern mobile browsers. Use min-vh when the legacy 100vh value is the intended cap.

Let content define the final size

Unlike h:*, a minimum height does not clip or force overflow by itself. It establishes a floor, then lets content expand the element.

<article class="min-h:32x overflow:visible">    ...</article>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="min-h:32x min-h:100dvh@sm min-h:0@print">...</div>

Use height when the element should have an exact height.