CSS min-height Property

The min-height property in CSS is used to set the minimum height of an element’s content area. It sets a lower bound on the element’s height.

The min-height property applies only when the content of the element is smaller than the specified minimum height. Otherwise, the min-height property has no effect on the element. Refer to the example below:

Example:

.div1{
  min-height: 100px;
}
.div2{
  min-height: 200px;
}

---

CSS Syntax

The min-height property has the below syntax:

min-height: length|%|initial|inherit;

Property Values

The min-height property accepts the following values:

length	The default value is 0. It specifies the min-height in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
%	Specifies the min-height in percentage. The percentage value is calculated from the total of the containing element.
initial	Sets the min-height property to its default value(0).
inherit	Inherits the min-height property from the parent element.

General Info

Default Value	0
Inherited	No
JavaScript Usage	element.style.minHeight = “200px”;