[css] min-height hack

2rev087 • 21st Mar 2007 • code • , ,

CSS Hacks são necessários, mas sujar o html realmente não me deixa satisfeito. E um dos muitos problemas que nosso amigo IE(ca)6 tem com CSS é a propriedade min-height. Simplesmente não está implementada. Mesmo porque para o IE, o comportamento que deveria ser seguido com min-height é o padrão para qualquer elemento com uma height definida (graças á implementação incorreta da propriedade overflow…). Procurando por uma solução decente, a que me pareceu melhor foi a apresentada por Dustin Diaz: 
selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}
Funciona assim: o IE6 tambem não implementa corretamente a declaração !important, e vai sobrescrever a declaração de height:auto com height:500px, “emulando” a propriedade min-height:500px. Todos os browsers modernos vão seguir a declaração height:auto !important, mantendo min-height:500px à salvo. Nasty. A brincadeira funciona no IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2. Nada de IE5.x, infelizmente. (quem liga? eu com certeza não! :P)

2 Comments Comments Feed

  1. Joel Wallis (November 20, 2008, 12:23 am).

    Eu enfrentei o mesmo problema com o IE6, mas a solução foi bem mais simples do que a solução dada pelo Dustin Diaz (que no meu caso não resolveu!)…

    #content
    {
    _height: 280px; /* para o ieca 6 */
    min-height: 280px; /* outros browsers */
    }

    Eu só adicionei um _ no início da propriedade height para ela funfar direitinho… Testei no ica6 e 7, ff 3 e opera, e todos funfaram perfeitamente…

  2. rev087 (November 22, 2008, 7:09 pm).

    Obrigado Joel! Da próxima vez que eu tiver de aplicar min-height em algum layout, vou lembrar da sua dica.

Add a Comment