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```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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