Grow your CSS skills. Land your dream job.

Last updated on:

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.

Comments

  1. Brandon

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

  2. Les
    Permalink to comment#

    Does this apply to % values as well?

  3. I hate to be obvious but:

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

    Easier to read and works does it not?

    • Norm
      Permalink to comment#

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

  4. Permalink to comment#

    Thanks a shitton! :D

  5. Chas
    Permalink to comment#

    The one thing about some of these tricks is that if you were to use this trick in ie 7 and up you would have to have the correct doc type in order for the standards based css property to work properly. This is true for ie6 as well. I really do not like how IE fragmented itself and the html css programmers as well. In the beginning there were only two real browsers and that was the whole start of this proprietary swing by M$ to get people to program for IE that way it forces the user to use IE. Now that is gone the backward compatibility that is needed for M$ to keep up its selling capability is now finally getting squeezed out of the latest version of IE. It is my understanding that IE10 is way better than even IE9. I still need to test some of these great features and even then this may depend upon the doc type again.

  6. Teresa
    Permalink to comment#

    I would like to high five you through the internets. Thank you!

  7. leo
    Permalink to comment#

    hi folks,

    stupid question but does this work for width as well?

  8. Alok

    It works great.

    Thanks a lot.
    Alok

  9. CD
    Permalink to comment#

    This has fixed the issue I was facing. Thank you!

  10. PGH
    Permalink to comment#

    Thank you, the initial code works well for me on the core browsers including tablets

  11. Alan Cooper
    Permalink to comment#

    Hi guys, hoping you can help….

    have a container div which has two nested divs floating inside. I am trying to create the situation where the floating divs will always have the same height irrespective of the amount of content in each one.

    The fix i am trying at the moment (and failing with) is to set the minimum height of the parent div as above, then set the nested divs to a height of 100%, but it doesn’t seem to be working……..any help would be much appreciated!

  12. Xray
    Permalink to comment#

    I am working on a task to support IE8 and none of the above is fixing my problem :(

    form{min-height:200px; height:auto !important; _height:200px !important; }

    form{height:expression(this.scrollHeight form { height:500px;overflow:visible;}

    please help must support IE8

Leave a Comment

Current ye@r *

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