Height

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

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.

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

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

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

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

<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

Width

Control element width

Min Height

Use matching minimum-height helpers