CSS min-height Property

The min-height property sets the minimum height of an element.

It prevents an element from becoming any smaller than the specified value.

This property is used when the content is smaller than min-height, otherwise it has no effect.

Example

#

An element with a 300-pixel min-height value. Irrespective of the content, the element will not get any smaller than the min-height.

Henri Matisse was a French artist, known for both his use of color and his fluid and original draughtsmanship. He was a draughtsman, printmaker, and sculptor, but is known primarily as a painter.
<style>
  .min {
    border: 1px solid tomato;
    padding: 15px;
    min-height: 300px;
  }
</style>

<div class="min">
  Henri Matisse was a French artist,
  known for both his use of color and
  his fluid and original draughtsmanship.
  He was a draughtsman, printmaker, and
  sculptor, but is known primarily as a
  painter.
</div> 

Syntax

min-height: length | initial | inherit;

Values

#

Value Description
length Sets the minimum height. Use any valid CSS length value.
% Sets the minimum height in percent.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when min-height support started for each browser.

Chrome
1.0 Dec 2008
Firefox
3.0 Jun 2008
IE/Edge
7.0 Oct 2006
Opera
4.0 Jun 2000
Safari
2.0.2 Oct 2005

You may also like

Guides