Grow your CSS skills. Land your dream job.

min-height

Last updated on:

The min-height property in CSS is used to set the minimum height of a specified element. The min-height property always overrides both height and max-height. Authors may use any of the length values as long as they are a positive value.

.wrapper {
  height: 100%;     /* full height of the content box */
  min-height: 20em; /* Will be AT LEAST 20em tall */
}

.wrapper {
  height: 600px;
  min-height: 400px; /* Will be AT LEAST 20em tall : overrides height */
}

.wrapper {
  min-height: 400px; /* overrides height and max-height */
  height: 200px;
  max-height: 300px;
}
Check out this Pen!

If either value is greater (height > min-height or vice-versa), the value that is greatest will be the one rendered. The min-height property will apply to all elements except non-replaced inline elements, table columns, and column groups (i.e. colgroup, col ).

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
24+ 5.1+ 18+ 12.1+ 8+ 2.1+ 3.2+

Comments

  1. Permalink to comment#

    sadasdsadasdasdadasdad_asdasdasddas_Your text to link here…
    asdasdasdadasd> asdasdasdasdasdad > > asdasdasdasdasdasd asdasddadadasdasdsadsdasdasdasdasddasasdasd d asdasddasdasdasdasdasdasdasdasdasddasdasdasda sdasdasdasdas

  2. Daniel
    Permalink to comment#

    I think the browser support table is inaccurate… For example Firefox 2+ supports min-height, according to http://caniuse.com/#feat=minmaxwh

  3. Hi Chris,

    I have been developing sites for many years and consider you a reputable source when developing, well done.

    Just a quick note about this, not sure how “compatible” this technique is as height is what sets the boxes’ height where as min-height is the secondary property.

    To my knowledge if min-height is greater than height than the container would “overflow” beyond its contents and may cause some inconsistency across the browsers.

    Am I missing something or over thinking?

    Looking forward to your reply,

    Mr Alexander

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".