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

# Min Height

> Control minimum height with size, fraction, and keyword min-height utilities.

export const MinHeightScreenKeywordDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">minimum-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={{
    minHeight: "100vh",
    width: "100%"
  }}>
              minimum-height-screen
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const MinHeightFullDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">minimum-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%"
  }}>
              minimum-height-full
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const MinHeightAutoDemo = () => {
  return <div className="not-prose sk-size-keyword-shell">
      <div className="tw-demo">
        <span className="tw-label">minimum-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={{
    minHeight: "auto"
  }}>
              minimum-height-auto
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const MinHeightFractionalDemo = () => {
  const parent = {
    height: "12rem",
    width: "100%",
    maxWidth: "22rem",
    marginLeft: "auto",
    marginRight: "auto",
    borderRadius: "0.5rem",
    padding: "0.35rem",
    background: "rgba(148, 163, 184, 0.2)",
    border: "1px solid rgba(100, 116, 139, 0.35)",
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-end"
  };
  const child = {
    minHeight: "50%",
    borderRadius: "0.45rem",
    padding: "0.75rem",
    fontSize: "0.75rem",
    fontWeight: 700,
    color: "#ffffff",
    textAlign: "center",
    background: "#4f46e5",
    boxShadow: "0 4px 12px rgba(15, 23, 42, 0.15)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <span className="tw-label">.minimum-height-1-2 inside a fixed-height parent</span>
        <div style={parent}>
          <div style={child}>At least half the parent height</div>
        </div>
      </div>
    </div>;
};

export const MinHeightDemo = () => {
  const items = [{
    cls: "minimum-height-3xs",
    px: "16rem",
    meta: "16rem / 256px"
  }, {
    cls: "minimum-height-md",
    px: "28rem",
    meta: "28rem / 448px"
  }, {
    cls: "minimum-height-2xl",
    px: "42rem",
    meta: "42rem / 672px"
  }];
  const blockStyle = {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: "0.75rem",
    background: "#10b981",
    padding: "1rem",
    fontSize: "0.75rem",
    fontWeight: 700,
    color: "#ffffff",
    boxShadow: "0 6px 14px rgba(15, 23, 42, 0.18)"
  };
  return <div className="not-prose my-6">
      <div className="tw-demo">
        <div className="grid grid-cols-3 gap-4">
          {items.map(h => <div key={h.cls}>
              <span className="tw-label">
                {h.cls} <span style={{
    color: "var(--demo-fg-faint)"
  }}>({h.meta})</span>
              </span>
              <div style={{
    ...blockStyle,
    minHeight: h.px
  }}>
                {h.cls}
              </div>
            </div>)}
        </div>
      </div>
    </div>;
};

## Overview

Min-height utilities set a floor while still allowing content to grow past that baseline.

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

## Examples

### Using the size scale

Use the t-shirt scale when a section or card needs a reliable minimum height before content starts growing it taller.

<MinHeightDemo />

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

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

### Using a percentage

Use fractional min-height utilities when an element should keep a minimum share of the parent's height.

<MinHeightFractionalDemo />

```html theme={null}
<div class="elementor-element height-3xs padding-2 background-gray-light rounded-lg flex flex-col justify-end">
  <div class="minimum-height-1-2 width-full padding-4 background-primary text-white rounded text-center text-sm font-bold">
    minimum-height-1-2
  </div>
</div>
```

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

### Matching the parent height floor

Use `minimum-height-full` when a child should always stay at least as tall as the parent that contains it.

<MinHeightFullDemo />

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

| Pattern               | Supported classes     | What it controls                               |
| --------------------- | --------------------- | ---------------------------------------------- |
| `minimum-height-full` | `minimum-height-full` | Uses the full parent height as a minimum floor |

### Matching the viewport floor

Use `minimum-height-screen` when a section should always reach the viewport height, even if its content is short.

<MinHeightScreenKeywordDemo />

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

| Pattern                 | Supported classes       | What it controls                            |
| ----------------------- | ----------------------- | ------------------------------------------- |
| `minimum-height-screen` | `minimum-height-screen` | Uses the viewport height as a minimum floor |

### Resetting the minimum height

Use `minimum-height-auto` when you want the browser to calculate the baseline height automatically again.

<MinHeightAutoDemo />

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

| Pattern               | Supported classes     | What it controls                                      |
| --------------------- | --------------------- | ----------------------------------------------------- |
| `minimum-height-auto` | `minimum-height-auto` | Resets the minimum height to automatic browser sizing |

## Best Practices

* Use `minimum-height-<size>` when a surface needs a reliable baseline height but should still grow with content.
* Use `minimum-height-full` only when a parent already establishes height.
* Use `minimum-height-screen` for page shells, hero sections, and empty states.
* Use `minimum-height-auto` when you need to remove a previous minimum-height rule.

## Related Utilities

<CardGroup cols={2}>
  <Card title="Height" icon="arrows-up-down" href="/sizing/height">
    Fixed and viewport height helpers
  </Card>

  <Card title="Max Height" icon="arrow-up-right-and-arrow-down-left-from-center" href="/sizing/max-height">
    Pair minimum and maximum height constraints
  </Card>
</CardGroup>