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

  4. User Avatar
    Martin Potokar
    Permalink to comment#

    While it appears to be five years old, I am altogether glad and thankful for finding this CSS trick since it addressed and corrected a problem I was having with one of my html website pages whereby one of my pages was failing to display text in scrolling down to the bottom of one of my pages when using Firefox or MS edge but not in Google Chrome. Interestingly enough, I was experiencing similar behavior in the early ongoing with one or more other Hhtml pages whereby I was able to rectify the issue through trial and error by modifying the padding and margin attribute values in my external CSS. However, this eventually became a real pita in that modifying the values ended up working for one but not both pages whereby I was eventually forced to use inline CSS in the remaining html page to override that provided in the external CSS. Then, wouldn’t you know it, another one of my website pages began acting up exhibiting similar behavior when viewed in FF and MS edge. I then added the min-height attribute as described herein to a section in my external CSS and, voila, this resolved the problem once and for all.

Leave a Comment

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.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag