W3docs
en
Log in

CSS min-height Property

Use the min-height CSS property to set the minimum height of the content area of an element. Learn more about property values with examples.

The min-height property sets an element's minimum height. This property prevents the height property's value from becoming smaller than the value specified for min-height.

The min-height property interacts with the height and max-height properties according to CSS sizing rules.

The property takes a CSS length (px, pt, em, etc.) or a percentage.

Info

Negative values are not accepted.

Initial Value0
Applies toAll elements, except non-replaced inline elements, column groups and table columns.
InheritedNo.
AnimatableYes. Height is animatable.
VersionCSS2
DOM Syntaxobject.style.minHeight = "100px";

Syntax

Syntax of CSS min-height Property

min-height: auto | length | percentage | calc() | initial | inherit;

Example of the min-height property:

Example of CSS min-height Property with px value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        min-height: 50px;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <div>The text area's minimum height is defined as 50px.</div>
  </body>
</html>
Try it Yourself »

Result

SS min-height Property

Example of the min-height property specified as "3cm":

Example of CSS min-height Property with cm value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #ccc;
      }
      p.example {
        min-height: 3cm;
      }
    </style>
  </head>
  <body>
    <h2>Min-height property example</h2>
    <h3>Min-height: auto.</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <h3>Min-height: 3cm.</h3>
    <p class="example">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>
Try it Yourself »

Values

| Value | Description | Play it | |---|---| | auto | The browser calculates and selects a min-height for the given element. | Play it » | | length | Defines minimum height in px, pt, cm, etc. Default value is 0. | Play it » | | % | Sets the minimum height in % of containing element. | | | calc() | Calculates the minimum height using an expression. | Play it » | | fit-content() | Sets the minimum height based on the content size. | Play it » | | max-content | Sets the minimum height to the intrinsic maximum width/height of the content. | Play it » | | min-content | Sets the minimum height to the intrinsic minimum width/height of the content. | Play it » | | initial | Makes the property use its default value. | Play it » | | inherit | Inherits the property from its parent element. | |

Practice

Practice

What does the 'min-height' property in CSS do?