Altura a 100% de uma div.

Parece-me que existem bastantes dúvidas de como por uma div com altura de 100%, ou seja de modo a ocupar toda a altura de uma janela do browser.

Então deixo aqui um pequeno tutorial de como o fazer.

Primeiro vamos definir o css:

html {
height: 100%;
}

body {
margin:0px;
padding:0px;
height:100%;
background-color:#000000;
}

#main {
min-height:100%;
height:auto;
margin:0px auto;
width:500px;
background-color:#666666;
color:#FFFFFF;
}

/* Para o IE */
* html #main{
height:100%;
}

Explicando, para a nossa div, poder ter todo o tamanho do browser é necessário, que o parent neste caso o body tenha também a altura de 100%, por isso é que o body e html têm a altura de 100%.

Está lá o hack para o IE, porque sem ele o que acontecia era que a div ficava apenas com o tamanho do conteúdo.

Agora temos o código HTML que é muito simples:

<div id="main"> Conteúdo<div>

Como se pode ver é extremamente simples, por uma div com a altura a 100%. Podem ver o demo aqui ( sem conteúdo suficiente para encher a página ) e aqui ( com conteúdo suficiente para fazer aparecer a scroll bar vertical ), e fazer o download aqui do código de ambas as páginas.

Esta é um dos 2, 3 métodos que existem para criar div's com 100% de altura, e de entre eles, este é o mais fiável. Pelo que testei.

Aproveito também para dizer, que já criei uma sandbox, para poder mostrar os demos funcionais do código que for postando aqui. Podem vê-la aqui: http://lancaster.freehostia.com/