Code Snippet

Home » Code Snippets » CSS » Cross-Browser Min Height

Cross-Browser Min Height

div {
   min-height: 500px;
   height:auto !important;
   height: 500px;
}

This works because (thankfully?) IE treats "height" how "min-height" is supposed to be treated.

Source: Dustin Diaz

Alternate Using Expressions (IE Only)

div {
   height: expression( this.scrollHeight < 501 ? "500px" : "auto" );
}

Sets the minimum height in IE to be 500px. Make sure that this.scrollHeight < 501 is 1 px greater than the minimum height that you want or you will get some strange results.

Subscribe to The Thread

  1. Brandon

    Does this only apply to IE6? Doesn’t IE7 support min/max height/width?

    Reply ↓
  2. Les

    Does this apply to % values as well?

    Reply ↓
  3. mike foskett

    I hate to be obvious but:

    div {
    min-height: 500px;
    _height: 500px;
    }

    Easier to read and works does it not?

    Reply ↓
    • Norm

      Underscore hacks will make your css invalid, and using ie expression can impact performance so that’s why the first snippet is so cool :)

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~