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

cssselector {
  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:

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

css#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:

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

css#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:

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

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

Результат:

See also