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. User Avatar
    Brandon

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

  2. User Avatar
    Les
    Permalink to comment#

    Does this apply to % values as well?

  3. User Avatar
    mike foskett
    Permalink to comment#

    I hate to be obvious but:

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

    Easier to read and works does it not?

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

    Thanks a shitton! :D

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

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

  7. User Avatar
    leo
    Permalink to comment#

    hi folks,

    stupid question but does this work for width as well?

  8. User Avatar
    Alok

    It works great.

    Thanks a lot.
    Alok

  9. User Avatar
    CD
    Permalink to comment#

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

  10. User Avatar
    PGH
    Permalink to comment#

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

    • User Avatar
      Lydia Dugger
      Permalink to comment#

      Came across this today – if this was reference to min-height: initial, this does not work in IE11. FYI for anyone who comes across this note!

  11. User Avatar
    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. User Avatar
    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

  13. User Avatar
    Shogo
    Permalink to comment#

    Thanks for the fix – works like a charm.

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