CSS: min-height property

This CSS tutorial explains how to use the CSS property called min-height with syntax and examples.

Description

The CSS min-height property defines the minimum height of the content area of an element.

The syntax for the min-height CSS property is:

min-height: value;

value

The min-height of the content area of an element. It can be one of the following:

Value	Description
fixed	Fixed value expressed in pixels, em's, etc. div { min-height: 50px; } div { min-height: 40em; }
percentage	Percentage value div { min-height: 50%; }
inherit	Indicates that the element will inherit the min-height from its parent element div { min-height: inherit; }

The content area of an element is inside the padding, border, and margin of the element.
The CSS min-height property applies to block level and replaced elements.
The CSS min-height property is used to prevent the CSS height from becoming smaller than the value specified in the CSS min-height property.
When the value is provided as a percentage, it is relative to the height of the containing block.
See also height, width, max-height, max-width, min-width.

The CSS min-height property has basic support with the following browsers:

We will discuss the min-height property below, exploring examples of how to use this property in CSS.

Let's look at a CSS min-height example where we have provided the min-height as a fixed value expressed in pixels.

div { min-height: 20px; }

In this CSS min-height example, the height of the <div> tag can not become smaller than 20px.

We can also express the min-height as a fixed value in em's.

For example:

div { min-height: 50em; }

In this CSS min-height example, the height of the <div> tag can not become smaller than 50em.

Let's look at a CSS min-height example where we have provided the min-height as a percentage.

div { min-height: 75% }

In this CSS min-height example, the height of the <div> can not become smaller than 75%.