Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
The min-height Property in CSS
The CSS min-height property sets the minimum height for an element's content box. It ensures that the element will never be smaller than the specified minimum height, even if the content would naturally require less space.
Syntax
selector {
min-height: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Sets minimum height in px, em, rem, cm, etc. |
% |
Sets minimum height as percentage of parent element |
auto |
Browser calculates minimum height automatically |
initial |
Sets to default value |
inherit |
Inherits from parent element |
Example: Basic Min-Height
This example demonstrates how min-height ensures elements maintain a minimum size −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
min-height: 120px;
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 10px 0;
border: 2px solid #333;
}
.normal-box {
background-color: #2196F3;
color: white;
padding: 10px;
margin: 10px 0;
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="normal-box">Normal box - height adjusts to content</div>
<div class="box">Min-height box - always at least 120px tall</div>
<div class="box">This box has more content but still respects the minimum height of 120px. If content exceeds this height, the box will grow accordingly.</div>
</body>
</html>
Three boxes appear: a blue box that adjusts to content height, a green box with minimum 120px height containing short text, and another green box with longer content that expands beyond 120px.
Example: Percentage Min-Height
This example shows using percentage values for responsive minimum heights −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 300px;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.child {
min-height: 50%;
background-color: #FF5722;
color: white;
padding: 15px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="child">This element has min-height: 50%</div>
</div>
</body>
</html>
A gray container with an orange child element that takes up at least 50% of the container's height, with centered text.
Conclusion
The min-height property is essential for creating layouts with consistent minimum dimensions. It prevents elements from becoming too small while allowing them to grow when needed, making it invaluable for responsive design.
Updated on: 2026-03-15T14:06:40+05:30
88 Views
Advertisements