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 */
}
&#91;/sourcecode&#93;

E se fosse max-height seria assim : 

&#91;sourcecode language="css"&#93;
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.

This entry was posted in CSS and tagged , , by Danilo. Bookmark the permalink.

About Danilo

Danilo é desenvolvedor front end e back end. Gosta de tênis, de acompanhar o Corinthians e de jogar futebol de videogame (no futebol de verdade ele é muito ruim).

11 thoughts on “Min-Height e Max-Height para IE usando css condicional

  1. Pingback: Você não precisa de css hacks | TidBits

  2. Show de bola, eu estava fazendo via javascript, mas não estava funcionando em todos navegadores.
    Muito legal!

  3. Pingback: min-height e max-heigth para IE « Francis G.

  4. 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!

  5. Muito bem, me ajudou. Mas não tem como por os dois exemplos que você mostrou no mesmo css. (o max e o min)

Leave a Reply

Your email address will not be published. Required fields are marked *