The min-height property sets an element’s minimum height. This property prevents the height property’s value from becoming smaller than the value specified for min-height.
The min-height property overrides the max-height and height properties.
The property takes a CSS length (px, pt, em, etc.) or a percentage.
| Initial Value | 0 |
| Applies to | All elements, except non-replaced inline elements, column groups and table columns. |
| Inherited | No. |
| Animatable | Yes. Height is animatable. |
| Version | CSS2 |
| DOM Syntax | object.style.minHeight = “100px”; |
Syntax
min-height: length | initial | inherit;Example of the min-height property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
min-height: 50px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Min-height property example</h2>
<div>The text area's minimum height is defined as 50px.</div>
</body>
</html>Result
Example of the min-height property specified as “3cm”:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #ccc;
}
p.example {
min-height: 3cm;
}
</style>
</head>
<body>
<h2>Min-height property example</h2>
<h3>Min-height: auto.</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<h3>Min-height: 3cm.</h3>
<p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>