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: auto | 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
All three boxes use the same markup and differ only in content. Notice that min-height acts purely as a floor and never as a ceiling.
No min-height
Short content
Shrinks to fit content size
minh10rem — minh10rem
Short content
Even though the content is shorter than 100px, the box never drops below 100px.
minh10rem — minh10rem
As the content grows, the box keeps growing past the minimum height, because min-height is a floor and not an upper limit. The longer this paragraph gets, the taller the box gets with it.
Once the content exceeds 100px the box grows to fit. Nothing is clipped.
The key idea
min-height sets a floor, never a ceiling. Use max-height for an upper limit, and height to pin the box to a fixed size.
Per-class Detail
minh100vhmin-height: 100vh
Guarantees at least the viewport height, and lets the element grow beyond it when the content is longer.
When to use
The classic use is on the page wrapper, so the footer does not float in the middle of the screen on short pages.
<!-- Page shell that always fills the viewport -->
<div class="minh100vh dg gtrauto-1fr-auto bg0F0F17">
<header class="p2rem bb1pxsolid27272A">Header</header>
<main class="p2rem">Short content still pushes the footer down</main>
<footer class="p2rem bt1pxsolid27272A">Footer</footer>
</div>minh100pmin-height: 100%
Uses 100% of the parent height as the floor. Being a percentage, it needs the parent to have a resolved height.
When to use
Use it inside a container of known height when a child must fill at least as much as its parent. If the parent height is auto, there is nothing to resolve the percentage against and it has no effect.
<!-- Percentage needs an ancestor chain with a resolved height -->
<div class="h40rem bg18181B br8px">
<div class="minh100p p2rem">
Fills the 40rem parent at minimum, grows past it if content is taller
</div>
</div>minhamin-height: auto
Leaves the minimum height to the browser's own calculation. On ordinary blocks it behaves like zero, but on flex and grid items the content size becomes the floor.
When to use
Use it to switch off a minimum height coming from a shared component or a rule higher up.
<!-- Undo a minimum height inherited from a shared component -->
<div class="minha p16px bg18181B br8px">
Height is decided by the content again
</div>minh0min-height: 0
Sets the minimum height explicitly to zero. Most often used to defeat the automatic minimum size of flex and grid items.
When to use
If a scroll area inside a flex child never scrolls and the container just keeps growing, add this class to that child. The cause is the flex item's default minimum size being its content size, which stops it from shrinking.
<!-- Let a flex child shrink so its inner area can scroll -->
<div class="df fdc h40rem">
<header class="p16px bb1pxsolid27272A">Title</header>
<!-- Without minh0 this child refuses to shrink below its content -->
<div class="fg1 minh0 oya p16px">
<p class="mb16px">Long list...</p>
</div>
</div>minhfcminhmincminhmaxc
Bases the floor on content size instead of a fixed number. min-content is the size with as much wrapping as possible, max-content is the size with no wrapping at all, and fit-content lands between the two.
When to use
Use it in components whose content length is unknown, to guarantee that nothing gets clipped. Vertical-axis support varies between browsers, so verify on real screens.
<!-- Floor tied to the content rather than a fixed number -->
<div class="minhminc p16px bg18181B br8px">
Never shorter than the tallest unbreakable content
</div>
<div class="minhfc p16px bg18181B br8px">
Shrink wraps the content as the floor
</div>minhnmin-height: auto
Declares that no minimum height limit applies.
When to use
Use it to express the absence of a limit. When you really need to remove a minimum height in practice, <code class="fs13px cC4B5FD bg1E1E2E py2px px4px br4px">minh0</code> is the safer choice.
<!-- Declares no minimum height limit -->
<div class="minhn p16px bg18181B br8px">
No minimum height limit
</div>Usage Examples
The basic forms for guaranteeing page height, hero sections, and equal card heights.
<!-- 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>A search results panel. Loading, empty, and error states share the same floor, so nothing below jumps as the state changes.
<!-- Results panel that does not collapse between states -->
<section class="minh30rem df fdc jcc aic bg0F0F17 b1pxsolid27272A br12px p3-2rem">
<!-- Loading, empty and error states all reuse this same floor, -->
<!-- so the page below never jumps as the state changes -->
<p class="fs2rem fw700 cFAFAFA mb8px">No results</p>
<p class="fs14px c71717A lh1-7 tac mb16px">
Try a different keyword or clear the filters.
</p>
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Clear filters</button>
</section>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.
Percentages need a sized parent
minh100p only works when the parent has a resolved height. With an auto height parent there is nothing to compute the percentage from and it is ignored. Give the parent a height, or use viewport units instead.
min-height beats height and max-height
When the three conflict, min-height wins. A height of 100px with a min-height of 200px results in 200px. This is the first thing to check when a height refuses to behave.
Automatic minimum size of flex items
A flex item's default minimum size is its content size, which is why an inner scroll area often refuses to work. In a column flex layout, adding minh0 fixes it.
Careful with 100vh on mobile
Mobile browsers change the height 100vh resolves to as the address bar collapses and expands. For full-screen layouts, consider dynamic viewport units or design so that a shifting gap does no harm.