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!