CSS min-height and max-height Properties
The min-height and max-height in CSS are non-inherited properties that are used to specify a minimum height and maximum height for the element’s box.
In other words, these properties are used to control the lower and upper limits of the size of an element’s box. The value of these properties can be an auto, none, length, percentage, initial, and inherit. However, negative values are not allowed.
The web browsers such as IE7 and Firefox 2 were the first major browsers to support min-height and max-height properties.
Syntax to Define min-height and max-height Properties in CSS
The general syntax to define min-height and max-height properties in CSS to control minimum and maximum height for an element is as follows:
selector {
min-height: value;
max-height: value;
}Here, the selector represents an element for which CSS rule has to apply.
Possible Values for min-height and max-height Properties
The possible values for CSS min-height and max-height properties are as follows:
- auto: This is the default value for min-height. The web browser calculates the minimum height for an element.
- none: This is the default value for max-height, meaning that there is no maximum height.
- length: This specifies a fixed minimum height and maximum height in units such as pixels (px), ems (em), rems (rem), etc.
- percentage: This specifies a minimum height and maximum height as a percentage of the containing block’s height.
- initial: Setting this value sets the property to its default value, which is auto.
- inherit: Setting this value inherits the minimum and maximum heights from its parent element.
Example:
div {
min-height:200px;
max-height: 100px;
}Example based on min-height and max-height Properties
Let’s take an example in which we will set the minimum height for an element.
Example 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Min-Height Example</title>
<style>
div {
width: 100%;
min-height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>This div element will always have a minimum height of 200px.
</div>
</body>
</html>
Output:
In this example, the div element will always have a minimum height of 200px, even if the content inside it is less.
Let’s take an example in which we will set max-height for a div element.
Example 3:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Max-Height Example</title>
<style>
div {
width: 100%;
max-height: 150px;
background-color: lightcoral;
overflow: auto;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec odio ipsum.
Suspendisse cursus malesuada facilisis. Nunc consectetur euismod sem quis congue.
Integer lacinia velit sed massa pellentesque, nec venenatis eros venenatis.
Maecenas nec dui lacus. Fusce fringilla velit urna, ac tempus ligula malesuada at.
Donec et mi dui. Nam ac lectus in risus consequat commodo.
Donec suscipit neque nulla, non vulputate odio venenatis ac. Cras in magna eget felis convallis aliquam.
In hac habitasse platea dictumst. Proin in feugiat urna, a condimentum sapien.
Vivamus ultrices, eros sit amet pellentesque aliquet, nulla libero fermentum dui, at pretium sapien urna ut turpis.
Nullam vitae neque neque. Proin pharetra vel dolor eu vehicula.
</div>
</body>
</html>
Output:
In this example, the div element has a maximum height of 150px. If the text content exceeds this height, it becomes scrollable due to the defined overflow: auto property.
Using Initial Value
When you specify the initial value for min-height and max-height properties, it sets the min-height and max-height properties to its default value, which is auto. This means the element’s box will have no minimum height and maximum height constraints.
Example 4:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min-Height with Initial Value Example</title>
<style>
.box1 {
min-height: 200px; /* Initially setting a minimum height */
background-color: lightblue;
}
.box2 {
min-height: initial; /* Resetting to default value */
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="box1">
<p>This box has a minimum height of 300px.</p>
</div>
<div class="box2">
<p>This box has its minimum height set to the default value, which is auto.</p>
</div>
</body>
</html>
In this example, the .box1 element initially has a minimum height of 300px, but the .box2 element has its min-height set to the default value using initial.
Example 5:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Max-Height with Initial Value Example</title>
<style>
.box1 {
max-height: 300px; /* Initially setting a maximum height */
background-color: lightcoral;
overflow: auto;
}
.box2 {
max-height: initial; /* Setting to default value none. */
background-color: lightyellow;
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
<p>This box has a maximum height of 300px.</p>
<p>If the content exceeds this height, it will be scrollable.</p>
</div>
<div class="reset">
<p>This box has its maximum height reset to the default value (none).</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum nec odio ipsum. Suspendisse cursus malesuada facilisis.
Nunc consectetur euismod sem quis congue.
Integer lacinia velit sed massa pellentesque, nec venenatis eros venenatis.
Maecenas nec dui lacus. Fusce fringilla velit urna, ac tempus ligula malesuada at.
Donec et mi dui. Nam ac lectus in risus consequat commodo.
Donec suscipit neque nulla, non vulputate odio venenatis ac. Cras in magna eget felis convallis aliquam.
In hac habitasse platea dictumst. Proin in feugiat urna, a condimentum sapien.
Vivamus ultrices, eros sit amet pellentesque aliquet, nulla libero fermentum dui, at pretium sapien urna ut turpis.
Nullam vitae neque neque. Proin pharetra vel dolor eu vehicula.</p>
</div>
</body>
</html>
In this example, the .box1 element initially has a maximum height of 300px, but the .box2 element has its max-height set to the default value using initial.
Note that the initial value sets the min-height property to its default value (auto). Whereas, the initial value sets the max-height property to its default value (none).
With Inherit Value
When you use the inherit value for the CSS min-height and max-height properties, the element inherits the minimum or maximum height from its parent element. This means that the height constraints applied to the parent will also apply to the child element.
Example 6:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min-Height Inherit Example</title>
<style>
.parent {
min-height: 200px;
background-color: lightblue;
}
.child {
min-height: inherit;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="parent">
Parent Container
<div class="child">
Child Container
</div>
</div>
</body>
</html>
In this example, both the .parent and .child elements will have a minimum height of 200px because the .child element inherits the min-height from its parent.
Example 7:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Max-Height Inherit Example</title>
<style>
.parent {
max-height: 200px;
background-color: lightcoral;
}
.child {
max-height: inherit;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="parent">
Parent Container
<div class="child">
Child Container
</div>
</div>
</body>
</html>
In this example, both the .parent and .child elements will have a maximum height of 200px because the .child element inherits the max-height from its parent element.
Note that if you set inherit value for min-height or max-height for an element in CSS, the element inherits the minimum and maximum heights from its parent element.
In CSS, the setting inherit value for min-height and max-height properties in CSS can be useful when you want child elements to follow the same height constraints as their parent elements, maintaining consistency across the layout.
