Min Height - Skelementor

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.

<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.

<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.

<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.

<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.

<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.

Height

Fixed and viewport height helpers

Max Height

Pair minimum and maximum height constraints

​Overview

​Examples

​Using the size scale

​Using a percentage

​Matching the parent height floor

​Matching the viewport floor

​Resetting the minimum height

​Best Practices

​Related Utilities