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:
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:
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/
Então deixo aqui um pequeno tutorial de como o fazer.
Primeiro vamos definir o css:
html {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%.
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%;
}
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/