The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern


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+


  1. sdasd
    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

  3. 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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed