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.
Does this only apply to IE6? Doesn’t IE7 support min/max height/width?
Does this apply to % values as well?
I hate to be obvious but:
div {
min-height: 500px;
_height: 500px;
}
Easier to read and works does it not?
Underscore hacks will make your css invalid, and using ie expression can impact performance so that’s why the first snippet is so cool :)
Thanks a shitton! :D
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.
I would like to high five you through the internets. Thank you!
Yup ! From me too ! Worked great for me !!! xoxo
hi folks,
stupid question but does this work for width as well?
It works great.
Thanks a lot.
Alok
This has fixed the issue I was facing. Thank you!
Thank you, the initial code works well for me on the core browsers including tablets
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!
Here is a very simple and efficient fix for IE11 : https://kmuncie.com/blog/2016/07/12/ie-11-flexbox-min-height-bug-workaround/
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!
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
Thanq !! It works out :)
Thanks for the fix – works like a charm.