The min-height property

The min-height property sets a minimum height of an element. The property value is any size units or the none keyword, meaning no value.

Typically set for an element with a floating width (the height is set as a percentage or not set at all, and the element’s height is expanded by its content).

If a minimum height is specified, then the element cannot become smaller than this height. If there is less text than needed for min-height, the element will have a height of min-height.

If there is more text, the height of the element will be calculated depending on the amount of text.

Syntax

selector {
	min-height: value;
}

Example

In this example, the height is not set at all and will be calculated by the browser itself depending on the amount of text. However, since the min-height property is set, the height will not decrease below this value, even if there is no text at all:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
}

Example

Let's add more text to the element so that the block's height overflows. In this case, our block will simply increase its height:

<div id="elem">
	some long text...
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Example

For comparison, let's see what will happen to the block if we remove its minimum height and instead set the height property:

<div id="elem">
	some long text...
</div>

#elem {
	height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
	margin-bottom: 50px;
}

The min-height property

Syntax

Example

Example

Example

See also