Layout com 100% de altura
Escrito por Márcio Silva em 17 abr, 2009 com 0 Comentário(s)
Olá Pessoal,
Para quem está brigando com os navegadores para que o layout fique preenchendo 100% da altura do site, aqui vai uma dica importante. Na maioria dos navegadores isso é fácil, mas vai fazer isso no Internet Explorer.
Vamos ao HTML básico de página, onde existe um DIV que compreende todo conteúdo do site. Chamemos esse DIV de main.
Para formatar o HTML mostrado acima com 100% da altura basta usar o seguinte código CSS.
html, body
{
height:100%;
padding:0;
margin:0;
}
* html #main
{
height:100%;
}
#main
{
min-height:100%;
background:#CCC;
}
As duas grandes sacadas para resolver esse problema é atribuir 100% de altura ao HTML e o BODY para que os DIVs internos possam expandir 100% da altura; e logo após, da linha 8 à linha 10, usar um css hack para o IE. Ao contrário de outros hacks como _height este é validado pelo W3C. Se o IE fosse camarada, não precisaria dessas linhas pois apenas o restante do CSS resolveria o problema, mas fazer o que…
Até a próxima.
