min-height
Sets the minimum height of an element. Guarantees the element is at least the specified height regardless of content. The most common use is minh100vh to ensure full page height.
Classes with Units
Various units can be used with the minh{value}{unit} pattern.
| Class | CSS | Description |
|---|---|---|
minh100px | min-height: 100px | minimum 100px |
minh200px | min-height: 200px | minimum 200px |
minh50rem | min-height: 50rem | minimum 500px (50rem) |
minh100vh | min-height: 100vh | minimum full viewport height |
minh50vh | min-height: 50vh | minimum half viewport height |
minh100p | min-height: 100% | at least 100% of parent height |
Keyword Classes
| Class | CSS | Description |
|---|---|---|
minha | min-height: auto | browser default |
minhn | min-height: none | no minimum height limit |
minhfc | min-height: fit-content | fit to content |
minhminc | min-height: min-content | content minimum size |
minhmaxc | min-height: max-content | content maximum size |
Visual Comparison
When content is minimal, min-height guarantees a minimum height.
No min-height
Short content
Shrinks to fit content size
minh20rem — minh20rem
Short content
Guarantees at least 200px height even with little content
Usage Examples
<!-- Full viewport page (footer fixed at bottom) -->
<div class="minh100vh dg gtrauto-1fr-auto">
<header>Header</header>
<main>Footer stays at bottom even with little content</main>
<footer>Footer</footer>
</div>
<!-- Hero section minimum height -->
<section class="minh50vh df jcc aic bg18181B">
<h1 class="cFAFAFA fs4rem">Hero Title</h1>
</section>
<!-- Card minimum height guaranteed -->
<div class="dg gtcr3-1fr gap2rem">
<div class="minh20rem bg18181B p2rem br8px">Card 1</div>
<div class="minh20rem bg18181B p2rem br8px">Card 2</div>
<div class="minh20rem bg18181B p2rem br8px">Card 3</div>
</div>Tips
Pinning footer to the bottom
Apply minh100vh to the body or main wrapper and combine with dg gtrauto-1fr-auto to keep the footer at the bottom of the screen even with minimal content.