Height

Utilities for setting the height of an element


Class reference

ClassProperties
h-autoheight: auto;
h-0height: 0;
h-pxheight: 1px;
h-0.5height: 0.125rem;
h-1height: 0.25rem;
h-1.5height: 0.375rem;
h-2height: 0.5rem;
h-2.5height: 0.625rem;
h-3height: 0.75rem;
h-3.5height: 0.875rem;
h-4height: 1rem;
h-4.5height: 1.125rem;
h-5height: 1.25rem;
h-6height: 1.5rem;
h-7height: 1.75rem;
h-8height: 2rem;
h-9height: 2.25rem;
h-10height: 2.5rem;
h-11height: 2.75rem;
h-12height: 3rem;
h-13height: 3.25rem;
h-14height: 3.5rem;
h-15height: 3.75rem;
h-16height: 4rem;
h-18height: 4.5rem;
h-20height: 5rem;
h-24height: 6rem;
h-28height: 7rem;
h-32height: 8rem;
h-36height: 9rem;
h-40height: 10rem;
h-48height: 12rem;
h-56height: 14rem;
h-60height: 15rem;
h-64height: 16rem;
h-72height: 18rem;
h-80height: 20rem;
h-96height: 24rem;
h-1/2height: 50%;
h-1/3height: 33.333333%;
h-2/3height: 66.666667%;
h-1/4height: 25%;
h-2/4height: 50%;
h-3/4height: 75%;
h-1/5height: 20%;
h-2/5height: 40%;
h-3/5height: 60%;
h-4/5height: 80%;
h-1/6height: 16.666667%;
h-2/6height: 33.333333%;
h-3/6height: 50%;
h-4/6height: 66.666667%;
h-5/6height: 83.333333%;
h-fullheight: 100%;
h-screenheight: 100vh;
h-screen-25height: 25vh;
h-screen-50height: 50vh;
h-screen-75height: 75vh;
h-screen-85height: 85vh;
h-screen-100height: 100vh;

# Auto

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

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

# Screen height

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

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

# Fixed height

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

h-8

h-12

h-16

h-24

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

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