Min-height, hack rápido e fácil

Olá pessoal, hoje vou falar de um hack bem fácil pra se usar com a propriedade min-height. Talvez alguns não saibam, mas o IE 6 não interpreta esta propriedade.

Muitos estão se perguntando, nunca ouvi falar disso, o que esta propriedade faz cara?

Bem, esta propriedade simplesmente define uma altura mínima para o elemento em que for declarado, se os elementos forem filhos de um outro elemento e o conteúdo couber dentro do elemento pai então a altura não é alterada, mas se o conteúdo extrapolar a altura do elemento pai, então a altura é aumentada de acordo que o conteúdo se encaixe perfeitamente no elemento pai.

Bom, por motivos de clareza vamos exemplificar com imagens de renderização no IE 6 e Firefox.

Primeiro quero mostrar a diferença entre height e min-height no Firefox pra vocês:

O primeiro parágrafo foi definido como:
height: 60px;

E o segundo como:
min-height: 60px;

Vejam como o texto extrapolou o parágrafo e está fora dos limites, isto porque no total o parágrafo tem 96px de altura, mas só foi definido 60px usando a propriedade height. Agora no segundo parágrafo ficou tudo no tamanho certo, mesmo que tenha sido definido 60px usando min-height o tamanho foi ajustado de acordo com a largura do box que contém o texto.

Agora no IE 6:

No IE 6 não parece ter nenhum efeito, pois é, o IE 6 e anteriores não reconhecem a propriedade min-height, então ignoram esta propriedade, nestes navegadores height funciona como min-height, então ao definir um valor menor para o primeio parágrafo, o mesmo foi redimensionado para o tamanho ideal. No segundo paragráfo min-height é ignorado e como height tem o valor padrão como auto, tudo foi redimensionado, mas não é isso o que queremos, queremos que o segundo parágrafo tenha uma altura mínina.

A maneira correta de ser renderizado seria a do firefox, usando min-height, porque height mantém um valor fixo para um box.

Mas enfim cheguei aonde queria, para resolver este problema usamos um hack para que seja renderizado nos 2 browsers corretamente.

Vamos usar o hack com a declaração !important.

Bem não vou entrar em detalhes sobre esta declaração para que o post não fique muito extenso e também há bastante conteúdo sobre o assunto, talvez no próximo post comento um pouco sobre isto.
Mas vou deixar o link do blog do maujor pra quem quiser entender melhor esta declaração.

Muito bem chega de enrolação e vamos ao hack agora, segui o código:

min-height: 60px;
height: auto !important;
height: 60px;


Usamos no box que contém a propriedade height este hack e o firefox passa a reconhecer o valor de min-height e do height que contém a declaração com !important, porque tem maior prioridade, como o valor de height neste caso é auto — que é o valor padrão da propriedade height — o valor de height será igual ao tamanho de min-height para acomodar o conteúdo do box. Já no IE 6 e anteriores o valor de min-height não é reconhecido e é ignorado. Estes browsers não reconhecem a declaração !important, como há outra propriedade height logo após, o valor auto é substituído pelo valor da segunda propriedade height, e então tudo será renderizado conforme planejado.

Este hack funciona no IE 6 e anteriores, no Firefox, no Opera, no Safari.

É isso aí! Comentem se for possível!

Abraços, façam bom proveito!