Min height cross browser CSS

In CSS version 2 there is a “min-height” property, but it doesn’t work in the same way in every browser,…

Dicembre 17, 2009

In CSS version 2 there is a “min-height” property, but it doesn’t work in the same way in every browser, or better, it’s not supported by every browser.

Looking around in the web I’ve found different CSS tricks to make min-height properties cross browser.
Here they are, I usually use the third one, but I do not know if it is the best one:

FIRST METHOD

1
2
3
4
5
6
7
/* for browsers that don't suck */
#container { min-height:200px; height:auto !important; }
 
/* for Internet Explorer */
/*\*/
* html #container { height: 200px; }
/**/

SECOND METHOD

1
2
#container  { min-height:200px; }
* html #container { height:200px; }

THIRD METHOD

1
2
3
4
5
#container {
   height:auto !important;
   height:200px;
   min-height:200px;
}

Author

PHP expert. Wordpress plugin and theme developer. Father, Maker, Arduino and ESP8266 enthusiast.

This site uses cookies. By continuing to browse the site you are agreeing to our use of cookies.READ MORECLOSE