Rodapé sempre no rodapé com CSS
Postado por: Pedro Rogério emProvavelmente você já deve ter tentado desenvolver um site onde possuia pouco conteúdo e gostaria de deixar o rodapé sempre no rodapé independente de possuir conteúdo ou não. Eu particularmente já passei por muitos problemas com isso, onde, quando o conteúdo excedia a área visível do site o rodapé não acompanha a área do conteúdo e ficava por cima do mesmo quebrando todo o layout. Veja um exemplo desse problema aqui.
Nesse exemplo fazemos o uso da seguinte marcação HTML:
<div id="header"> ...Conteúdo... </div> <div id="content"> ...Conteúdo... </div> <div id="rodape"> ...Conteúdo... </div>
Uma marcação HTML simples, o grande segredo está no CSS:
html, body {height:100%}
#content {
height:auto !important;
height:100%;
min-height:100%;
}
#rodape {
position:absolute;
bottom:0px;
width:100%;
}
Essa seria basicamente a estrutura necessária para deixar o rodapé sempre no rodapé, mas esse código ainda não é satisfatório pois ocorre o problema do rodapé sobrepôr o conteúdo. Vamos agora a uma solução Crossbrowser:
<div id="wrap">
<div id="header"></div>
<div id="main"></div>
</div>
<div id="footer"></div>
Agora vamos a marcação CSS:
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 40px;} /* deve ser a mesma altura do rodapé */
#footer {
position: relative;
margin-top: -40px; /* A mesma altura do rodapé, o valor deve ser negativo */
height: 40px;
clear:both
}
Agora vocês podem ver um exemplo do rodapé sempre no rodapé através de uma solução Crossbrowser. Essa solução foi retirada do site CSS Sticky Footer.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
cara muito boa essa técnica de deixar o rodapé no rodapé, principalmente para sites que trabalham com posições absolutas e priorisam o conteúdo como sendo o primeiro bloco no fluxo do site.
vlw
Olá Pedro,
O exemplo do CSS Sticky Footer funciona muito bem, mas e se o div#footer estiver dentro do div#wrap?
Ainda não cheguei em uma solução sem precisar de scripts ou hacks.
Abraços.
Legal, no blog sobre web standards eu coloquei hoje também uma forma de como fazer um rodapé fixo. A idéia é quase a mesma só o código é diferente.
prefiro esse código ao da solução no blog citado acima.
Interessante, mas aqui no FF apareceu a barra de rolagem e o rodapé ficou “escondido”, não sei se é este mesmo o resultado. mas já dá para fazer uns testes.
Sei que o foco aqui é somente CSS, mas usando javascript sai um resultado interessante inclusive com o rodapé fixo sem precisar usar position no CSS.
Abraço!
Bom não sei se é bem isto, mas geralmente eu uso cleah:both kuando meu fot, sobe XD
Cara, curti muito o tutorial para rodapé sempre no rodapé, isso realmente é uma mão na roda para quem desenvolve site utilizando só css e não quer ver o design do site ” destruído” por uma coisa dessas, está de parabéns.
Amigo eu estou fazendo um layout com width e height em 900px porém o firefox mostra um espaço embaixo do rodapé.
No IE funda normal mas no FF não, eu vou postar o link…
http://www.seuguiadecidades.com.br/teste/index.html
@Vinícius,
Esperimente remover a altura que você definiu e verá que funcionará normalmente.
Opa Pedro!
Cara estou usando essa tecnica, mais estou tendo um problema… uso a tecnica na div geral e dentro dela tenho uma conteudo e está eu preciso que seja height: 100%, porém não funciona de jeito algum devido a tecnica… poderia me dar uma luz de como resolver isso?
Forte Abraço e valeu pelas dicas no blog!
Já testei praticamente todas as alternativas que achei com relação ao rodapé no pé da página, ou div pai que nao acompanha a altura da div seguinte…
Grande parte delas realmente dão certo, mas até um determinado ponto: conteúdo estático.
No momento que o conteúdo da div ‘filha’ são inserções dinâmicas (notícias, galeria fotos), aí a coisa se vai… não achei uma única que funcionasse.
Alguém tem alguma dica?
[...] this page was mentioned by gust4vo ZimmermanN (@gust4vo), Pinceladas da Web (@pinceladasdaweb) and others. [...]
aqui não funcionou em praticamente 50% dos navegadores…
programador #fail
Muito boa a explicação, parabéns!
Achei que nunca ia precisar disso uma vez que eu sempre fiz layouts em que o rodapé nunca precisasse ficar embaixo mesmo. Hoje eu precisei… Parabéns Pedro Rogério. Abraço.
Show de bola, é muito útil para muitos casos, mas sabem me dizer se no CSS3 tem essa funcionalidade nativa?
Abraços,
Lucas Martins.
Lucas,
Até onde sei não.
Nossa, muito boa esta tua explicação… Sempre fico me batendo com os rodapés, e dessa vez ficou direitinho no lugar!!! Muito bom mesmo!!! Vlw por dividir seus conhecimentos!!!!
No firefox essa solução não funciona… testei em 3 máquinas com versões diferentes, mas o seu código (adicionando algumas linhas de texto a mais…) não funciona, o footer é exibido no meio do texto… No IE fica perfeito… O mesmo acontece com o código do outro site postado… Para textos pequenos ele funciona, porém quando o texto é grande o footer para de descer e fica parado no meio do texto…
no meu acontece o msm.. no ie fica perfeito.. mas no firefox e no chrome fica em branco a parte que devia ter o rodape
Valeu cara encontrei exatamente o que estava procurando!!!!
Parabéns pelo seu trabalho, Deus continue te dando motivação para fazê-lo!
Vlw kara, resolveu meu problema.
[...] .CSS Rodapé sempre no rodapé [...]
Opaaaaa ….. vlw mano!!!
Nossa muito obrigado nem acreditei que era só isso bati a cabeça aqui para fazer vlw. Só percebi uma coisa se vc deixa 100% no #wrap ele gera barra de rolagem resolvi o problema colocando 99.8% assim a barra não aparece.
estava com esse problema do rodapé não abaixar junto com o conteúdo do site, solução: não determinei nas principais divs topo conteúdo e rodapé nem absolute nem relative, funcionou perfeitamente, no ie6, ie7, ie8, chrome e firefox. não sei se posso fazer isso mais funcionou!
Muito Bom !!
Mas eu gostaria de saber, como faço pro bottom da div #main encostar no topo do #footer mesmo que não tenha conteúdo suficiente pra ele descer até lá ?
Abraços !
eeee
esta solução é horrivel!
melhor opção é a que Gustavo Krause indicou:
http://www.webstandards.blog.br/css/rodape-fixo/
Das técnicas que eu vi, essa sua é a melhor.
Valeu!
Amigos, sempre utilizei essa solução, é a melhor.
Mas de uns tempos pra cá ta mostrando barra de rolagem mesmo com pouco conteúdo, alguém sabe porque?
Estou com o mesmo problema
ando em busca de uma solução definitiva para isso! Se alguém já souber, responde ai!
Já aconteceu isso comigo… se não me falha a memória, o problema foi porque eu havia colocado padding na div q tem altura 100%. Verifiquem também se o padding da div #main está com a mesma altura do #rodape. Dêem uma revisada ae que pode ser uma besteira que deixaram passar.
Valeu!
foi mal,
estava vendo comentario melhor da galera , percebi que no comentario do Eduardo que ele menciou como resolver esse problema diminuindo de 100% para 99,8% que no meu caso eu diminui para 99% pegou tambem a div#main
como resolver o problema que Daniel França mencinou ?/
Boa! ajudou pra caramba!
Olha so galera.. pra eu conseguir este feito na impressão eu fiz da seguinte forma..
defini uma div pra abranger todo o conteudo e defini um tamanho pra div .. coloquei o conteudo todo dentro dela , fechei. e depois coloquei o rodapé..
ficou uma maravilha.. igual em todos os navegadores.. pq o navegador tem q respeitar o tamanho da div.+
Eu usei o position:fixed e o bottom:0px conforme o exemplo abaixo e resolveu perfeitamente.
#footer {position:fixed;bottom:0px;height: 43px;clear:both;width:100%;background:#CC0000;
}