Skip to main content

​
Overview

Height utilities cover fixed size steps, fractions, and keyword heights in one suffix system.
PatternSupported 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>
PatternSupported classesWhat 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-7xlFixed 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>
PatternSupported classesWhat it controls
height-<fraction>height-1-2, height-1-3, height-2-3, height-1-4, height-3-4Height 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>
PatternSupported classesWhat it controls
height-fullheight-fullFills 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>
PatternSupported classesWhat it controls
height-screenheight-screenMatches 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>
PatternSupported classesWhat it controls
height-autoheight-autoSizes 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.

Width

Control element width

Min Height

Use matching minimum-height helpers