Min Height

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "min-height"; export const description = "Utilities for setting the minimum height of an element.";

<ApiTable rows={[ ["min-h-<number>", "min-height: calc(var(--spacing) * <number>);"], ["min-h-<fraction>", "min-height: calc(<fraction> * 100%);"], ["min-h-px", "min-height: 1px;"], ["min-h-full", "min-height: 100%;"], ["min-h-screen", "min-height: 100vh;"], ["min-h-dvh", "min-height: 100dvh;"], ["min-h-dvw", "min-height: 100dvw;"], ["min-h-lvh", "min-height: 100lvh;"], ["min-h-lvw", "min-height: 100lvw;"], ["min-h-svw", "min-height: 100svw;"], ["min-h-svh", "min-height: 100svh;"], ["min-h-auto", "min-height: auto;"], ["min-h-min", "min-height: min-content;"], ["min-h-max", "min-height: max-content;"], ["min-h-fit", "min-height: fit-content;"], ["min-h-lh", "min-height: 1lh;"], ["min-h-(<custom-property>)", "min-height: var(<custom-property>);"], ["min-h-[<value>]", "min-height: <value>;"], ]} />

Examples

Basic example

Use min-h-<number> utilities like min-h-24 and min-h-64 to set an element to a fixed minimum height based on the spacing scale:

<Figure> <Example> { <div className="mx-auto flex justify-center"> <div className="relative flex items-end space-x-4 font-mono text-xs font-bold text-white"> <Stripes border className="absolute -inset-x-[5%] h-20 w-[110%] rounded-lg" /> <div className="relative flex h-96 w-8 items-end justify-center rounded-lg bg-blue-500"> <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-96</div> </div> <div className="relative flex h-80 w-8 items-end justify-center rounded-lg bg-blue-500"> <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-80</div> </div> <div className="relative flex h-64 w-8 items-end justify-center rounded-lg bg-blue-500"> <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-64</div> </div> <div className="relative flex h-48 w-8 items-end justify-center rounded-lg bg-blue-500"> <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-48</div> </div> <div className="relative flex h-40 w-8 items-end justify-center rounded-lg bg-blue-500"> <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-40</div> </div> <div className="relative flex h-32 w-8 items-end justify-center rounded-lg bg-blue-500"> <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-32</div> </div> <div className="relative flex h-24 w-8 items-end justify-center rounded-lg bg-blue-500"> <div className="mb-8 -rotate-90 text-left text-nowrap">min-h-24</div> </div> </div> </div> } </Example> </Figure>

Using a percentage

Use min-h-full or min-h-<fraction> utilities like min-h-1/2, and min-h-2/5 to give an element a percentage-based minimum height:

<Figure> <Example> { <div className="flex h-96 items-end justify-center space-x-4 font-mono text-xs font-bold text-white"> <div className="relative flex h-full items-end"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative flex min-h-full w-8 items-end justify-center rounded-lg bg-sky-500"> <div className="mb-10 -rotate-90 text-left text-nowrap">min-h-full</div> </div> </div> <div className="relative flex h-full items-end"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative flex min-h-9/10 w-8 items-end justify-center rounded-lg bg-sky-500"> <div className="mb-10 -rotate-90 text-left text-nowrap">min-h-9/10</div> </div> </div> <div className="relative flex h-full items-end"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative flex min-h-3/4 w-8 items-end justify-center rounded-lg bg-sky-500"> <div className="mb-10 -rotate-90 text-left text-nowrap">min-h-3/4</div> </div> </div> <div className="relative flex h-full items-end"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative flex min-h-1/2 w-8 items-end justify-center rounded-lg bg-sky-500"> <div className="mb-10 -rotate-90 text-left text-nowrap">min-h-1/2</div> </div> </div> <div className="relative flex h-full items-end"> <Stripes border className="absolute inset-0 h-full rounded-lg" /> <div className="relative flex min-h-1/3 w-8 items-end justify-center rounded-lg bg-sky-500"> <div className="mb-10 -rotate-90 text-left text-nowrap">min-h-1/3</div> </div> </div> </div> } </Example> </Figure>

Using a custom value

<UsingACustomValue utility="min-h" value="220px" name="minimum height" variable="min-height" />

Responsive design

<ResponsiveDesign property="min-height" defaultClass="h-24 min-h-0" featuredClass="min-h-full" />

Customizing your theme

<CustomizingYourSpacingScale utility="min-h" />