Vue Height Utilities

Relative to the parent

Height utilities are generated from the utility API in _utilities.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.

A percentage height resolves against the parent, so the parent needs a height of its own — that is what the wrapper below provides.

<div style="height: 100px; background-color: rgba(255,0,0,0.1)">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>

Max height

.max-h-100 caps an element at the height of its parent, clipping whatever would otherwise overflow it.

<div style="height: 100px; background-color: rgba(255,0,0,.1)">
  <div class="max-h-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1)">Max-height 100%</div>
</div>

Min height

.min-h-100 sets a floor at the parent’s height instead of a cap: the element fills the parent when its content is short, and still grows past it when the content is tall. That is what separates it from .h-100, which pins the height and lets the overflow escape.

<div style="height: 100px; background-color: rgba(255,0,0,.1)">
  <div class="min-h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Min-height 100%</div>
</div>

.min-h-0 releases the same min-height: auto floor that .min-w-0 releases on the other axis. A scrolling child of a flex column needs it — without it the child grows to its content instead of scrolling inside the column.

<div class="d-flex flex-column" style="height: 200px;">
  <div class="min-h-0 overflow-auto">Scrolls inside the column</div>
</div>

Relative to the viewport

.vh-100 sets the height to the full viewport, .min-vh-100 sets it as a floor — the usual way to make a page fill the screen even when its content is short.

<div class="min-vh-100">Min-height 100vh</div>
<div class="vh-100">Height 100vh</div>

Dynamic viewport height

A mobile browser resizes the viewport as it shows or hides its URL bar, so vh-100 can end up taller than the visible area. The dvh unit tracks that change instead of the largest possible viewport, so use dvh-100/min-dvh-100 for full-screen mobile layouts.

<div class="min-dvh-100">Min-height 100dvh</div>
<div class="dvh-100">Height 100dvh</div>

Intrinsic heights

.h-min, .h-max and .h-fit size an element’s height from its content the same way the width variants do.

Customizing

Sass variables

Height utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

"height": (
  property: height,
  class: h,
  values: (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto,
    min: min-content,
    max: max-content,
    fit: fit-content
  )
),
"min-height": (
  property: min-height,
  class: min-h,
  values: (
    0: 0,
    100: 100%,
  )
),
"max-height": (
  property: max-height,
  class: max-h,
  values: (100: 100%)
),
"viewport-height": (
  property: height,
  class: vh,
  values: (100: 100vh)
),
"min-viewport-height": (
  property: min-height,
  class: min-vh,
  values: (100: 100vh)
),
"dynamic-viewport-height": (
  property: height,
  class: dvh,
  values: (100: 100dvh)
),
"min-dynamic-viewport-height": (
  property: min-height,
  class: min-dvh,
  values: (100: 100dvh)
),