Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
min-height

min-height

Specifies the minimum height of an element.

Sample Code

style.css

/* px: ensure a minimum height of 500px */
div.test { min-height: 500px;}

/* 0: no minimum height (initial value) */
div.test2 { min-height: 0;}

/* vh: ensure element covers the full viewport height */
.hero { min-height: 100vh;}

/* Sticky footer pattern */
body { display: flex; flex-direction: column; min-height: 100vh;}
footer { margin-top: auto;}

/* Keep cards at a consistent height even with little content */
.card { min-height: 200px;}

Available Values

Value	Description
number	A numeric value. Commonly used units are 'px' and '%'. Negative values are not allowed. When specified as '%', the reference size is the height of the containing block. The initial value is '0'.

Browser Display Result

<div style="min-height: 100px; background-color: #ff0;">This is a div element. 'min-height: 100px' is specified.</div>

<div style="height: 300px; border: solid 1px #f00;">
	<div style="min-height: 80%; height: 200px; background-color: #ff0;">This is a div inside a div. The parent div (red border) has 'height: 300px'. This element (yellow background) has 'min-height: 80%' and 'height: 200px'. Its minimum height is relative to the parent's height, giving a minimum of '240px'. Since '240px' is greater than 'height: 200px', this element's height becomes '240px'.</div>
</div>