# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/height.mdx

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 { DynamicViewportExample } from "@/components/dynamic-viewport-example.tsx";
import { Stripes } from "@/components/stripes.tsx";

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

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

## Examples

### Basic example

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

<Figure>

<Example>
  {
    <div className="flex items-end justify-center space-x-4 font-mono text-xs font-bold text-white">
      <div className="relative flex h-96 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-96</div>
      </div>
      <div className="relative flex h-80 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-80</div>
      </div>
      <div className="relative flex h-64 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-64</div>
      </div>
      <div className="relative flex h-48 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-48</div>
      </div>
      <div className="relative flex h-40 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-40</div>
      </div>
      <div className="relative flex h-32 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-32</div>
      </div>
      <div className="relative flex h-24 w-8 items-end justify-center rounded-lg bg-blue-500">
        <div className="mb-4 -rotate-90 text-left text-nowrap">h-24</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:h-96,h-80,h-64,h-48,h-40,h-32,h-24] -->
<div class="h-96 ...">h-96</div>
<div class="h-80 ...">h-80</div>
<div class="h-64 ...">h-64</div>
<div class="h-48 ...">h-48</div>
<div class="h-40 ...">h-40</div>
<div class="h-32 ...">h-32</div>
<div class="h-24 ...">h-24</div>
```

</Figure>

### Using a percentage

Use `h-full` or `h-<fraction>` utilities like `h-1/2` and `h-2/5` to give an element a percentage-based 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 h-full w-8 items-end justify-center rounded-lg bg-sky-500">
          <div className="mb-6 -rotate-90 text-left text-nowrap">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 h-9/10 w-8 items-end justify-center rounded-lg bg-sky-500">
          <div className="mb-6 -rotate-90 text-left text-nowrap">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 h-3/4 w-8 items-end justify-center rounded-lg bg-sky-500">
          <div className="mb-6 -rotate-90 text-left text-nowrap">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 h-1/2 w-8 items-end justify-center rounded-lg bg-sky-500">
          <div className="mb-6 -rotate-90 text-left text-nowrap">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 h-1/3 w-8 items-end justify-center rounded-lg bg-sky-500">
          <div className="mb-6 -rotate-90 text-left text-nowrap">h-1/3</div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:h-9/10,h-3/4,h-1/2,h-1/3,h-full] -->
<div class="h-full ...">h-full</div>
<div class="h-9/10 ...">h-9/10</div>
<div class="h-3/4 ...">h-3/4</div>
<div class="h-1/2 ...">h-1/2</div>
<div class="h-1/3 ...">h-1/3</div>
```

</Figure>

### Matching viewport

Use the `h-screen` utility to make an element span the entire height of the viewport:

```html
<!-- [!code classes:h-screen] -->
<div class="h-screen">
  <!-- ... -->
</div>
```

### Matching dynamic viewport

Use the `h-dvh` utility to make an element span the entire height of the viewport, which changes as the browser UI expands or contracts:

<Figure hint="Scroll the viewport to see the viewport height change">

<Example padding={false}>
  {<DynamicViewportExample unit="dvh" colorStyles="dark:bg-pink-500 bg-pink-500 border border-pink-400" />}
</Example>

```html
<!-- [!code classes:h-dvh] -->
<div class="h-dvh">
  <!-- ... -->
</div>
```

</Figure>

### Matching large viewport

Use the `h-lvh` utility to set an element's height to the largest possible height of the viewport:

<Figure hint="Scroll the viewport to see the viewport height change">

<Example padding={false}>
  {<DynamicViewportExample unit="lvh" colorStyles="dark:bg-indigo-500 bg-indigo-500 border border-indigo-400" />}
</Example>

```html
<!-- [!code classes:h-lvh] -->
<div class="h-lvh">
  <!-- ... -->
</div>
```

</Figure>

### Matching small viewport

Use the `h-svh` utility to set an element's height to the smallest possible height of the viewport:

<Figure hint="Scroll the viewport to see the viewport height change">

<Example padding={false}>
  {<DynamicViewportExample unit="svh" colorStyles="dark:bg-purple-500 bg-purple-500 border border-purple-400" />}
</Example>

```html
<!-- [!code classes:h-svh] -->
<div class="h-svh">
  <!-- ... -->
</div>
```

</Figure>

### Setting both width and height

Use utilities like `size-px`, `size-4`, and `size-full` to set both the width and height of an element at the same time:

<Figure>

<Example>
  {
    <div className="grid grid-flow-col justify-center gap-4 text-center font-mono text-xs font-bold text-white">
      <div className="grid size-16 items-center justify-center rounded-lg bg-indigo-500">size-16</div>
      <div className="grid size-20 items-center justify-center rounded-lg bg-indigo-500">size-20</div>
      <div className="grid size-24 items-center justify-center rounded-lg bg-indigo-500">size-24</div>
      <div className="hidden size-32 items-center justify-center rounded-lg bg-indigo-500 sm:grid">size-32</div>
      <div className="hidden size-40 items-center justify-center rounded-lg bg-indigo-500 md:grid">size-40</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:size-16,size-20,size-24,size-32,size-40] -->
<div class="size-16 ...">size-16</div>
<div class="size-20 ...">size-20</div>
<div class="size-24 ...">size-24</div>
<div class="size-32 ...">size-32</div>
<div class="size-40 ...">size-40</div>
```

</Figure>

### Using a custom value

<UsingACustomValue utility="h" value="32rem" name="height" variable="height" />

### Responsive design

<ResponsiveDesign property="height" defaultClass="h-1/2" featuredClass="h-full" />

## Customizing your theme

<CustomizingYourSpacingScale utilities={["h", "size"]} />