Legal essa dica, é bom lembrar de colocar a altura do footer de padding bottom no content pra quando o conteudo for grande ele não correr o risco da ultima linha ficar escondida atras do footer!

Não tenho certeza, mas pelo que vi acho que seria interessante colocar uma altura fixa no footer e definir um padding-bottom com o mesmo valor da altura no geral, pra evitar que o rodapé sobreponha o conteúdo.

http://www.cssstickyfooter.com/

Guto Gomes,

Para que o conteúdo não fique por cima do rodapé é só você inserir um padding bottom – com tamanho maior que o rodapé – na div que antecede a div do rodapé. Neste caso é na div “content”.

Legal o post, por mais que não aconselho usarem position, nas grandes agências que exigem mais qualidade isso não é bem visto.

Assim como a solução do James que contem margin negativo.

Mas para usarem em freelas onde o cliente não tem conhecimento pode ser útil caso tenho um cliente chato.

Abraços…

obs: Diego estava devendo posts cara, tenho seu rss mas ao longo dos meses não veio dando muito suporte para nós com conteúdo, estou gostando de ver nesta semana. Nos acostumou mal! rs

Caro colega sua solução é válida porem existem formas de fazer o rodapé ficar na parte baixa da janela no IE6 sem precisar de jquery, parabens pelo post aprecio muito seu conteudo.

Ariê, você poderia me explicar porque não se pode usar position’s nem margin negativa?

Engraçado, você não “aconselha” usar essas coisas porém o site linkado ao seu avatar faz uso de BLACK HAT, o rodapé fica 100% de largura apenas na home, tem barra de rolagem horizontal desnecessária em resoluçao 1024, excesso de div’s entre outras coisas que apenas dei uma olhada rápida, isso você aconselha?

Arie,
sua justificativa para não usar margin negativa e position, pra mim, não foi muito esclarecedora.. Esperava algo mais profissional de alguém que trabalhou em uma “agência grande” como a “click” e participou de sites como o da “abril” e “lg”.. Caso eu vá numa entrevista não vou me envergonhar de admitir que uso isso.

Em relação ao black hat, no meu ponto de vista, o seu site usa sim! E não é 1 vez só! Em cada text replacement tem um textão que não condiz com a imagem exibida (isso é o que olhei por cima). Além do mais a sua justificativa foi deprimente! Agora porque políticos ou seja quem for rouba e não vai preso, eu também posso roubar e achar que estou certo? é demais!

É, essa técnica é muito boa…

Eu até tenho um template no aptana, pra todas as telas sempre ter o footer colado embaixo hehe.

Mas infelizmente o mesmo cliente chato também quer que funcione no iE6, então no esquema aqui da minha máquina ele tem a firula pro iE. =/

Legal esse post, o código é antigo, mas toda hora aparece alguém que tem dúvidas de como fazer.

Abraço.

O Footer fica fixo, mas somente em relação ao content, se experimentar aumentar o conteudo de uma das laterais ela invadirá o footer e ele não ficará fixo, ou seja, isto não funciona, imagine uma loja virtual com uma lateral maior que a vitrine, é necessário o footer ficar fixo em relação a todos os elementos e isto não acontece no exemplo.

Ignorar por ignorar o IE6, a técnica do position:fixed é a mais apropriada e fácil.

Essa solução não funciona, se eu coloco mais linha no footer, já da problema.

Nesse link existe algo que realmente funciona:
http://www.cssstickyfooter.com/using-sticky-footer-code.html

Oi Diego,

Você sabe me dizer como faço as páginas do blogspot ter um tamanho fixo? tanto a página principal como as páginas fixas?
é que eu estou construindo uma plataforma para streaming, mas eu queria que o usuário visse todo o conteúdo da página sem precisar rolar e também queria diminuir o background do post para que ele ficasse centralizado na página também em relação à altura (up e down) e jogar o rodapé fora. deu pra entender o que quero fazer?

Opa mano… vlw, ajudou bastante…

Muito Obrigado, com algumas adaptações necessárias para o meu projeto, cumpriu o prometido!

O rodapé aparece só no internet explorer.. no mozilla e no chrome é como se nem existisse.. dai aparece um só grossao(um sobreponto o outro) na ultima folha

Legal, esse aqui tbm é bom:

http://unicodebrasil.wordpress.com/2012/04/14/rodape-e-no-rodape/ 

Testei aqui e o rodapé sobrepoem em parte o conteudo, quando a tela do navegador é redimensionada para um tamanho menor. 

Aqui na agência desenvolvemos um plugin que controla o elemento footer e faz todo esse processo.. se houver pouco conteudo, o rodapé fica colado em baixo, caso contrário. se move juntamente com o conteudo, mas sem sobrepô-lo.

Coloque uma altura fixa para o teu rodapé. Depois coloque uma margem na base da div que contorna o conteúdo. Esta margem deve ser do tamanho da altura do rodapé.

cool..

O meu caso era mais simples, resolvi meu problema com porcentagem.

CSS
—————————————————–
#footer {
position: fixed;
width: 100%;
left: //0px ou %//;

top: 90%;
height: 10%;
background-color: //QUALQUER COR// ;
}
———————————————————

HTML