Height

Basic usage

Fixed heights

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

<div className="**h-96** ...">h-96</div>
<div className="**h-80** ...">h-80</div>
<div className="**h-64** ...">h-64</div>
<div className="**h-48** ...">h-48</div>
<div className="**h-40** ...">h-40</div>
<div className="**h-32** ...">h-32</div>
<div className="**h-24** ...">h-24</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 className="h-48">
  <div className="**h-full** ...">
    <!-- This element will have a height of `12rem` (h-48) -->
  </div>
</div>

Viewport height

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

<div className="**h-screen**">
  <!-- ... -->
</div>