Height

Class reference

# Auto

Use h-auto to let the browser determine the height for the element.

<div class="h-auto ...">h-auto</div>

# Screen height

Use h-screen to make an element span the entire height of the viewport.

<div class="h-auto ...">h-auto</div>

# Fixed height

Use h-{number} or h-px to set an element to a fixed height.

<div class="h-8 ..."></div>
<div class="h-12 ..."></div>
<div class="h-16 ..."></div>

# Full height

Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

<div class="h-48">
  <div class="h-full ...">h-full</div>
</div>

# Responsive

To control the height of an element at a specific breakpoint, add a {screen}: prefix to any existing width utility. For example, adding the class md:h-full to an element would apply the h-full utility at medium screen sizes and above.

<div class="h-8 **md:h-full**"></div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.