min-height

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. User Avatar
    sdasd
    Permalink to comment#

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

  2. User Avatar
    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. User Avatar
    Mr Alexander
    Permalink to comment#

    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

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag