> ## Documentation Index
> Fetch the complete documentation index at: https://skelementorcss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Height

> Control height with size, fraction, and keyword height utilities.

export const HeightScreenDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">height-screen</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-viewport">
            <div className="sk-size-keyword-bar sk-size-keyword-bar--tall" style={{
    height: "100vh",
    width: "100%"
  }}>
              height-screen
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const HeightFullDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">height-full</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-parent sk-size-keyword-parent--tall">
            <div className="sk-size-keyword-bar sk-size-keyword-bar--fill" style={{
    minHeight: "100%"
  }}>
              height-full
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const HeightAutoDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">height-auto</span>
        <div className="tw-demo-stripes sk-size-keyword-frame">
          <div className="sk-size-keyword-parent sk-size-keyword-parent--tall">
            <div className="sk-size-keyword-bar sk-size-keyword-bar--inline" style={{
    height: "auto"
  }}>
              height-auto
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const HeightFractionalThirdsDemo = () => {
  const track = {
    height: "11rem",
    width: "100%",
    maxWidth: "20rem",
    marginLeft: "auto",
    marginRight: "auto",
    borderRadius: "0.5rem",
    border: "1px solid rgba(100, 116, 139, 0.35)",
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
    gap: "2px",
    background: "rgba(148, 163, 184, 0.2)"
  };
  const cell = (key, heightPct, bg, text) => <div key={key} style={{
    height: heightPct,
    flexShrink: 0,
    background: bg,
    color: "#ffffff",
    fontSize: "0.7rem",
    fontWeight: 700,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.12)"
  }}>
      {text}
    </div>;
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.height-1-3 + .height-2-3</span>
        <div className="tw-demo-card" style={{
    padding: "0.35rem"
  }}>
          <div style={track}>
            {cell("t1", "33.333%", "#7c3aed", ".height-1-3")}
            {cell("t2", "66.666%", "#db2777", ".height-2-3")}
          </div>
        </div>
      </div>
    </div>;
};

export const HeightDemo = () => {
  const heights = [{
    cls: "height-3xs",
    rem: 16,
    label: "16rem / 256px"
  }, {
    cls: "height-sm",
    rem: 24,
    label: "24rem / 384px"
  }, {
    cls: "height-xl",
    rem: 36,
    label: "36rem / 576px"
  }, {
    cls: "height-4xl",
    rem: 56,
    label: "56rem / 896px"
  }];
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="flex items-end gap-4 justify-center" style={{
    minHeight: "8rem"
  }}>
          {heights.map(h => <div key={h.cls} className="flex flex-col items-center gap-2">
              <span style={{
    fontFamily: "monospace",
    fontSize: "0.65rem",
    color: "var(--demo-fg-subtle)"
  }}>{h.cls}</span>
              <div style={{
    height: `${h.rem / 56 * 10}rem`,
    width: "3rem"
  }} className="rounded-md bg-sky-500 shadow-lg" />
              <span style={{
    fontFamily: "monospace",
    fontSize: "0.65rem",
    color: "var(--demo-fg-faint)"
  }}>{h.label}</span>
            </div>)}
        </div>
      </div>
    </div>;
};

## Overview

Height utilities cover fixed size steps, fractions, and keyword heights in one suffix system.

| Pattern             | Supported values                                                                     |
| ------------------- | ------------------------------------------------------------------------------------ |
| `height-<size>`     | `3xs`, `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl` |
| `height-<fraction>` | `1-2`, `1-3`, `2-3`, `1-4`, `3-4`                                                    |
| `height-<value>`    | `px`, `auto`, `full`, `screen`                                                       |

## Examples

### Using the size scale

Use the t-shirt height scale when you want a predictable fixed height for media blocks, panels, and feature shells.

<HeightDemo />

```html theme={null}
<div class="elementor-element">
  <div class="height-xl padding-3 background-primary text-white rounded text-center text-sm font-bold">
    height-xl
  </div>
</div>
```

| Pattern         | Supported classes                                                                                                                                                               | What it controls                       |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| `height-<size>` | `height-3xs`, `height-2xs`, `height-xs`, `height-sm`, `height-md`, `height-lg`, `height-xl`, `height-2xl`, `height-3xl`, `height-4xl`, `height-5xl`, `height-6xl`, `height-7xl` | Fixed heights based on the size ladder |

### Using a percentage

Use fractional height utilities when height should be relative to a parent container instead of fixed to the t-shirt scale.

<HeightFractionalThirdsDemo />

```html theme={null}
<div class="elementor-element height-3xs flex flex-col gap-1 rounded-lg overflow-hidden border-1 border-solid border-gray">
  <div class="height-1-3 flex items-center justify-center background-primary text-white rounded text-center text-sm font-bold">
    height-1-3
  </div>
  <div class="height-2-3 flex items-center justify-center background-secondary text-black rounded text-center text-sm font-bold">
    height-2-3
  </div>
</div>
```

| Pattern             | Supported classes                                                    | What it controls                     |
| ------------------- | -------------------------------------------------------------------- | ------------------------------------ |
| `height-<fraction>` | `height-1-2`, `height-1-3`, `height-2-3`, `height-1-4`, `height-3-4` | Height as a percentage of the parent |

### Filling the available height

Use `height-full` when an element should stretch to match the height of a parent that already defines its own height.

<HeightFullDemo />

```html theme={null}
<div class="elementor-element height-3xs rounded-lg padding-3 background-gray-light">
  <div class="height-full flex items-center justify-center background-success text-white rounded text-center text-sm font-bold">
    height-full
  </div>
</div>
```

| Pattern       | Supported classes | What it controls                  |
| ------------- | ----------------- | --------------------------------- |
| `height-full` | `height-full`     | Fills the available parent height |

### Matching the viewport

Use `height-screen` when a page shell, hero, or empty-state layout should match the viewport height.

<HeightScreenDemo />

```html theme={null}
<div class="elementor-element overflow-hidden rounded-lg">
  <div class="height-screen flex items-center justify-center background-primary text-white text-center text-sm font-bold">
    height-screen
  </div>
</div>
```

| Pattern         | Supported classes | What it controls            |
| --------------- | ----------------- | --------------------------- |
| `height-screen` | `height-screen`   | Matches the viewport height |

### Resetting the height

Use `height-auto` when height should fall back to the content instead of staying fixed or inherited from another rule.

<HeightAutoDemo />

```html theme={null}
<div class="elementor-element rounded-lg padding-3 background-gray-light">
  <div class="height-auto inline-block padding-3 background-primary text-white rounded text-center text-sm font-bold">
    height-auto
  </div>
</div>
```

| Pattern       | Supported classes | What it controls                               |
| ------------- | ----------------- | ---------------------------------------------- |
| `height-auto` | `height-auto`     | Sizes to content or surrounding layout context |

## Best Practices

* Use `height-full` only when a parent already establishes height.
* Use `height-screen` for full-view shells, splash sections, and empty states.
* Use `height-<fraction>` when the layout itself defines the parent height.
* Use `height-auto` to remove a fixed height and let content determine the block size.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Width" icon="arrows-left-right" href="/sizing/width">
    Control element width
  </Card>

  <Card title="Min Height" icon="arrow-down-left-and-arrow-up-right-to-center" href="/sizing/min-height">
    Use matching minimum-height helpers
  </Card>
</CardGroup>