The CSS min-height property specifies the minimum height of an element.
The CSS min-height property prevents the value of the height property from becoming smaller than the min-height.
Syntax:
min-width: length;length – specifies the height in px, %, etc (read also Units in CSS).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.example-1, .example-2 {
background-color: #e9c46a;
}
.example-2 {
min-height: 150px;
}
</style>
</head>
<body>
<h4>*no min-height specified</h4>
<p class="example-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>
<h4>min-height: 150px:</h4>
<p class="example-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>
</body>
</html>Output:
*no min-height specified
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit…
min-height: 150px:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit…
Enjoy coding!
Read also: