Para o novo site da Hiperquímica(que ainda não foi ao ar) precisei de uma solução para manter o rodapé sempre no fim da página, independente da quantidade de conteúdo que viria antes. Uma pesquisa rápida no Google me levou até algumas alternativas que utilizavam javascript (não me agradaram nem um pouco) e outras que utilizavam somente CSS.
As alternativas com CSS em sua maioria utilizavam duas propriedades para o rodapé: “position:absolute” e “bottom:0″. O problema dessa solução é que se redimensionarmos a janela do navegador, o rodapé sobrepõe o conteúdo, veja um exemplo dessa aplicação.
Procurando em sites gringos, encontrei uma solução interessante no qrayg.com. Adaptei o arquivo e disponibilizei um exemplo com código-fonte mais enxuto, confira!
O arquivo com exemplo dessa solução está bem simples, então acredito que não haverá dúvidas. Mas se precisarem de algum esclarecimento, é só comentar!
19 Comentários em "Rodapé sempre no fim da página (sem javascript)"
Achei muito legal esse post e de fácil entendimento!
parabéns e sucesso para o blog!
Aloha
Muito bom, a maneira que eu utilizava era CSS puro, mas era uma solução maior…
. . Mas e quando o rodapé tem altura variável?
Boa pergunta Diego. Vou tentar descobrir uma solução, por enquanto funciona só com rodapés de tamanho fixo.
Se eu descobrir algo, posto aqui no blog.
Abraço.
Muito bom o post, parabéns!
Abraço!
Iiih, eu ía compartilhar esse post no meu google reader, mas vi que vc não têm RSS 0_0
De quaquer maneira, ótimo post!
Vou salvar esse nos favoritos, pq com certeza vou precisar.
Bom, muito bom. Já apanhei muito com isso!!!
Gostei!!!
Mas achei um bug bem tosco.
Quando tem scroll na horizontal o rodapé gera um scroll vertical desnecessário.
Fiz uma solução em js que agora migrei para lib jquery q sempre resolveu e nunca deu pau.
Caso tenha interesse em conferir:
http://www.lagden.art.br/jquery/footer.php
@Thiago Lagden
Eu não tinha me dado conta desse bug, entretanto acho que não é tão grave assim.
Se o internauta tem a janela pequena a ponto de ter uma barra de rolagem horizontal, a pequena barra de rolagem vertical que aparece não será o maior dos problemas dele.
A intenção é não utilizar javascript e resolver o problema só com HTML e CSS.
Mesmo assim, valeu a indicação.
Maravilhoso Nagüeva!
Ótimo mesmo!
@Nagüeva Guilherme
Eu tb estou em busca da batida perfeita (somente css para o div footer)…
Quem sabe no css3 o som apareça?!!
O Link não está sendo encontrado.
Pronto, os arquivos já estão disponíveis de novo!
Infelizmente o uso de FLOAT para controlar colunas dentro do CONTENT faz com que no FireFox o rodapé funcione como no primeiro exemplo.
Faltou um overflow:auto para div #content. Acho que isso deve resolver.
Olá,
Tentei colocar float na div content, simulando a possibilidade de colunas lado a lado acima do rodapé, mas daí surgiu o problema. Quando eu faço isso e o conteúdo é maior que a tela, gerando barra de rolagem, o rodapé se sobrepõe ao conteúdo…
Será que há uma solução para o efeito sanfona sobre o rodapé? cga [arroba] ig.com.br
Obrigado pela atenção e que a força da web esteja com vocês!!!!
no caso do FF, basta colocar uma div com clear:both; abaixo das divs com float que estão dentro do #content.
Nem sempre vilmondes, se a página for menor que a janela do browser o rodapé não vai ficar lá no fim.
Abraço,
eu estava me referindo ao problema citado pelo paulo =).
Abraço!
Ah, e ótimo post. Eu tbm sofria com isso xD.