Layout com 100% de altura

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.