Skip to main content

​
Overview

Min-height utilities set a floor while still allowing content to grow past that baseline.
PatternSupported 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>
PatternSupported classesWhat 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-7xlMinimum 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>
PatternSupported classesWhat it controls
minimum-height-<fraction>minimum-height-1-2, minimum-height-1-3, minimum-height-2-3, minimum-height-1-4, minimum-height-3-4Minimum 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>
PatternSupported classesWhat it controls
minimum-height-fullminimum-height-fullUses 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>
PatternSupported classesWhat it controls
minimum-height-screenminimum-height-screenUses 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>
PatternSupported classesWhat it controls
minimum-height-autominimum-height-autoResets 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