Indo direto ao ponto, alguma vez na vida você já passou, vai passar ou está passando pelo grande problema de que quando a página não preenche toda a altura da janela no navegador, fica um espaço vago entre o rodapé da página. Há uma técnica no CSS que resolve isso.

Em seu css, defina o Body desta seguinte maneira:

Código:

html, body {
height: 100%;
position: relative;
}


Agora adicione o seguinte CSS para o rodapé:

Código:

#rodape {
background: #ccc;
width: 100%;
position: absolute;
bottom: 0;
float: left;
padding-top: 10px;
padding-bottom: 10px;
}

Vamos entender melhor: nas tags html e body definimos uma altura de 100%, Isso fará com que o rodapé entenda que o limite dos dois elementos seja o final da janela do navegador. E defini um position: relative; para que o rodapé seja referenciado por ele.

Já no css do rodapé definimos a tag position: absolute; e bottom: 0; para que o rodapé seja forçando sempre para o final da página.

Lembrando que isso não se aplica ao IE6.

Créditos: Je4n & Tableless

Muito bom Je4n, estará ajudando bastantes usuários, como eu. Obrigado por compartilhar.

legal, vai ajudar a quem precisa, obg por compartilhar. bjs e me liga

Simples! e se quiser deixar nos cantos <> é só adicionar na classe do rodapé:

Código:


left:0;
right:0;


mesmo sabendo que width já resolve!