Postado por Cássio Fabre segunda-feira, 17 de junho de 2013 às 10:12

Ter um rodapé no site é algo que não conseguimos nos imaginar sem. Porém, este pode se tornar dor de cabeça, quando não feito de forma correta. Quando falando de sites, veja bem, site e não blog, muitas das vezes nos deparamos com situações em que não temos conteúdo suficiente para preencher toda extensão vertical do navegador e, nestes casos, o nosso footer sobe para o meio da tela, deixando o site complemente descaracterizado. Hoje aprenderemos a sanar essa dor de cabeça! Abra seu escritor de código preferido e mãos à obra.

Suponhamos o seguinte HTML de um site qualquer:
01.<html>
02.<head>
03.</head>
04. 
05.<body>
06.    <div class="wrap">
07.        <div class="header-container">
08. 
09.        </div><!-- .header-container -->
10. 
11.        <div class="footer-container">
12. 
13.        </div><!-- .footer-container -->
14.    </div><!-- .wrap -->
15.</body>
16.</html>
Algo simples, mas tudo que nós precisamos. Agora, vamos colocar o CSS que fará com que o rodapé fique sempre ao fundo do navegador. Em arquivo separado, ou dentro da tag <style>, se você não sabe qual fazer, leia a Parte 1 da série Aprenda HTML e CSS na Prática para entender melhor.
01.html, body, .wrap{
02.overflow-x: hidden;
03.height: 100%;
04.}
05. 
06.body > .wrap{
07.height: 100%;
08.min-height: 100%;
09.}
10. 
11..wrap{
12.position: relative;
13.min-height: 100%;
14.height: auto !important;
15.height: 100%;
16.}
17. 
18..header-container{
19.width: 978px;
20.height: 200px;
21.background: #123456;
22.}
23. 
24..footer-container{
25.width: 100%;
26.height: auto !important;
27.position: absolute;
28.clear: both;
29.bottom: 0 !important;
30.padding-bottom: 5px;
31.background: #357531;
32.}
O que fazemos aqui, é dizer ao navegador que o body tem 100% de altura e fazemos com que o footer fique sempre no fundo com o bottom: 0 !important;. Você pode se perguntar: mas então só fazendo essa configuração no bottom, não daria certo? Na verdade não, pois essa configuração faz com que o footer se fixe no fim do body. Daí a necessidade de definirmos o body com height: 100%. Isso faz com que o body tenha o tamanho do monitor, independente de qual seja, logo, o footer vai se fixar no fim da página.

Bom, testem o código, trocando as cores das divs para entender melhor a localização de cada uma.

Até a próxima.

3 comentários:

  1. Eu não manjo muito de html e css. Sou bem novo nesse ramo. Bom eu precisava fazer um rodapé parecido com esse aqui mirago.com.br
    Você poderia me ajudar?

    ResponderExcluir