Min-Height e Max-Height para IE usando css condicional

Assim com o exemplo de :first-child e :last-child, para usar min-height e max-height é necessário css condicional.

Na verdade é bem simples, vamos supor que temos uma div que tem que ter uma altura mínima pra não “quebrar o layout”

<div class="post">
	Lorem Ipsum Fusce rutrum nibh.
</div>

E agora o CSS para ficar no mínimo com 200px por exemplo:

div.post {
    height: expression(this.scrollHeight <= "200" ? "200" : "auto");
    min-height: 200px; /* para ff, safari, chrome, etc */
}

E se fosse max-height seria assim :

div.post {
    height: expression(this.scrollHeight >= "200" ? "200" : "auto");
    max-height: 200px; /* para ff, safari, chrome, etc */
}

Isso resolve também alguns problemas com float e position absolute onde a div não calcula automaticamente a altura do elemento com float dentro da div.

Você pode se interessar também por:

9 Responses to “Min-Height e Max-Height para IE usando css condicional”

1
ricardo esteves Says:
October 16th, 2008 at 10:18 am
Impressionante como conhecimento nunca se esgota…
Ótima dica!!
2
Você não precisa de css hacks | TidBits Says:
November 11th, 2008 at 9:46 pm
[...] de outra forma. Tudo bem, tem hacks que realmente precisamos colocar por falta de suporte do ie6. min-height e max-height, o suporte a imagens alpha ( pgn24 ) tão usado pelos designers hoje em dia e os pseudo seletores [...]
3
gadarf Says:
May 3rd, 2009 at 11:19 am
Boa artimanha.
4
Thiago Says:
September 10th, 2010 at 11:18 am
Excelente !
5
bstoll Says:
September 20th, 2010 at 3:18 pm
Show de bola, eu estava fazendo via javascript, mas não estava funcionando em todos navegadores.
Muito legal!
6
gih Says:
January 13th, 2011 at 12:50 pm
valeeeu!
funcionou direitinho no ie…
7
min-height e max-heigth para IE « Francis G. Says:
February 18th, 2011 at 10:02 am
[...] Fonte:TidBits fevereiro 18, 2011 // CSS // No Comments // [...]
8
Anderson Says:
September 10th, 2011 at 11:17 am
It worked perfectly! Thanks a lot for the explanation.
IE brings us a bunch of challenges in order to make our User/Client Experience even better.
Congrats!
9
caio Says:
December 21st, 2011 at 9:15 am
Muito bem, me ajudou. Mas não tem como por os dois exemplos que você mostrou no mesmo css. (o max e o min)