CSS min-height Property

CSS's min-height property is used to specify an element's minimum height. The min-height property is used when the element's content is smaller than the min-height, and it has no effect when the content is larger than the min-height. This property ensures that the height property's value is not less than the element's specified min-height value.

Syntax

min-height: length | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        border: 1px solid #212b36;
    }
    .ex2{
        min-height: 100px;
        border: 1px solid #212b36;
    }
</style>
</head>
<body>

<div class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>
<br><br>
<div class="ex2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

</body>
</html>

Preview

Property Values

Value	Description
none	There is no maximum height. This is the default setting.
length	Defines the maximum height in pixels, centimeters, and so on. Learn more about length units.
%	Defines the maximum height of the containing block in percentage terms.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
min-height	1.0	3.0	2.0	7.0	4.0

@media

min-width

CSS min-height Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us