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.
Negative values are not accepted.
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>
Values
Value | Description | Play it |
---|---|---|
auto | The browser calculates and selects a min-height for the given element. | Play it » |
length | Defines minimum height in px, pt, cm, etc. Default value is 0. | Play it » |
% | Sets the minimum height in % of containing element. | |
initial | Makes the property use its default value. | Play it » |
inherit | Inherits the property from its parents element. |
Browser support
1.0+ | 12.0+ | 3.0+ | 1.0+ | 4.0+ |
Practice Your Knowledge
What does the 'min-height' property in CSS do?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.