Home »
CSS
CSS min-height Property
Learn about the CSS min-height Property, its usages, syntax and examples.
Submitted by Shahnail Khan, on March 20, 2022
As you all know that we can set the height of an element in CSS using the height property. We can apply two more properties that somewhat serve the same purpose. We define a max-height property to specify the maximum height and min-height property to specify the minimum height.
What is CSS min-height Property?
As the name suggests, the min-height property specifies the minimum height of an element. If the property value set by the user is larger than the content, the minimum height will be applied. The min-height property overrides the height property. The default value is 0.
Syntax:
min-height: 0|%| length| initial| inherit;
Quick overview of the syntax used,
| Value |
Explanation |
| 0 |
This is the default value. |
| % |
Specifies minimum height in terms of per cent of the containing block's height. |
| length |
Specifies minimum height in units of length (m, cm, px, pt., etc.). |
| initial |
Sets min-height property to its default value. |
| inherit |
The same value of the min-height property as set in the container (parent) class. |
The example given below illustrates CSS min-height Property
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>minheight</title>
</head>
<style>
* {
margin-right: 100px;
}
#m1 {
border: 2px solid lightsalmon;
background-color: teal;
min-height: 64px;
}
#m2 {
border: 2px solid grey;
background-color: teal;
}
</style>
<body>
<div class="container">
<h2 class="main" id="m1">This element has min-height property</h2>
<h2 class="main" id="m2">This element has no min-height property</h2>
</div>
</body>
</html>
Output:
We have created the main class with m1 id and m2 id. The min-height property targets only m1 id elements. The property value is set to 64px.
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>minheight2</title>
</head>
<style>
.first,
th,
tr,
td {
border: 2px solid black;
background-color: aliceblue;
padding-left: 20px;
min-height: 20vw;
}
</style>
<body>
<div class="first">
<h2> Web Development</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JAVASCRIPT</li>
</ul>
<table class="table1">
<tr>
<td>Name</td>
<td>age</td>
</tr>
<tr>
<th>Rahul</th>
<th>17</th>
</tr>
</table>
</div>
</body>
</html>
Output: Before applying min-height property:
Output: After applying min-height property:
In this code, the min-height property targets all the elements of first class. The height of the first class elements is increased. The property value is set to 20vw, which defines the minimum height in viewport width.
CSS Tutorial & Examples »