Colocar Rodapé fixo no fim da página

Você já precisou ter o rodapé fixo no fim da página algum dia. Normalmente os clientes chatos acham feio aquele rodapé terminando no meio da página quando há pouco conteúdo. Há uma técnica no CSS que resolve isso. Não funciona no IE6, já aviso agora. Na verdade, tem um jeito de funcionar, mas não quero te acostumar mal. 🙂

Lembrando que você pode fazer isso facilmente com JQuery.

Suponha que você tenha o código HTML:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>

<title>Tableless.com.br</title>
</head>

<body>

<div>
<div>
HEADER
</div>
<div>
ESQUERDA
</div>
<div>
DIREITA
</div>
<div>
<p>
Lorem ipsum dolor sit amet
</p>
<p>
Duis id metus enim, sed dignissim magna.
</p>
</div>
<div>
FOOTER
</div>
</div>

</body>
</html>

E o seguinte CSS:

*  {
margin:0;
padding:0;
}

html, body {height:100%;}

.geral {
min-height:100%;
position:relative;
width:800px;
}

.footer {
position:absolute;
bottom:0;
width:100%;
}

.content {overflow:hidden;}
.aside {width:200px;}
.fleft {float:left;}
.fright {float:right;}

Na linha 6, você faz com que as tags body e html tenham 100% de altura. Isso fará com que o rodapé entenda que o limite dos dois elementos seja o final da janela do navegador.

Na linha 8, defino que a largura mínima do div GERAL, que é o div que envolve todo o site, seja de 100%. E defino um position: relative; para que o footer seja referenciado por ele.

Na linha 14, eu defino um position: absolute; e bottom:0; para footer, forçando sempre para o final do div.
Se houver pouco conteúdo o Rodapé fica lá embaixo, se houver muito, o rodapé desce junto com o conteúdo.

Funciona em IE7+ e em bons browsers.

Fonte: Tableless

Anúncios

1 comentário

Arquivado em XHTML

Uma resposta para “Colocar Rodapé fixo no fim da página

  1. Gostaria de ajuda para aplicar o que foi mostrado nesse post, não estou conseguindo de jeito nenhum!
    Aguardo resposta.
    Alice.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s