Busca

Boas práticas de Desenvolvimento com Padrões Web

Colocar Rodapé fixo no fim da página

Como deixar o Rodapé fixo fim da página quando houver pouco conteúdo.

12/01/2010 por Diego Eis
27 Comentários

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" 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 class="geral">
	<div class="header">
		HEADER
	</div>
	<div class="aside fleft">
		ESQUERDA
	</div>
	<div class="aside fright">
		DIREITA
	</div>
	<div class="content">
		<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue erat, ullamcorper pulvinar malesuada ultricies, mollis non magna. Curabitur quis nisi ut ligula ultricies gravida. Suspendisse elit justo, vulputate in facilisis sed, tristique id nisi. Maecenas risus quam, suscipit eu vehicula ut, ultricies in neque. Donec gravida tristique turpis ut interdum. Donec lacinia nisi id enim lacinia sit amet facilisis est ullamcorper. Curabitur ipsum libero, sollicitudin nec rhoncus quis, congue non ipsum. Etiam at eros dolor. Mauris non erat vitae leo faucibus fermentum. In consectetur, diam eget faucibus dignissim, urna justo pretium dui, nec eleifend neque velit vitae odio. Nam et tristique turpis. In dictum commodo sem ut dignissim. In convallis quam non tortor posuere sed ornare nulla pulvinar. Suspendisse placerat turpis in tortor rutrum nec mollis nulla posuere. Integer tellus est, rhoncus ut sagittis eget, mattis a velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque gravida posuere orci nec ornare. Donec elit nulla, aliquam eget cursus a, commodo sed odio.
		</p>
		<p>
		Duis id metus enim, sed dignissim magna. Quisque dapibus pulvinar diam eget adipiscing. Ut aliquet ipsum quis lorem elementum lacinia. Vestibulum feugiat ultrices orci, vel sollicitudin nibh rutrum eu. In gravida tincidunt ornare. Aenean vestibulum leo eu orci egestas semper. Proin euismod dapibus tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse rutrum purus eget lectus ultricies a consectetur ante laoreet. Phasellus ullamcorper gravida risus vitae convallis. Curabitur ante lorem, faucibus in tincidunt quis, ullamcorper at lectus. Fusce fermentum blandit varius. Donec a quam id massa bibendum commodo sit amet vel felis. Sed magna nibh, convallis nec dignissim non, vestibulum adipiscing ipsum. Mauris cursus fringilla tortor eu feugiat. Vivamus vestibulum dapibus justo, porttitor luctus nisi posuere at. Nunc mi elit, suscipit id venenatis at, suscipit nec purus. Donec malesuada fringilla tempor. Pellentesque vehicula diam a magna commodo sagittis. Nulla facilisi. 
		</p>
	</div>
	<div class="footer">
		FOOTER
	</div>
</div>
 
</body>
</html>

E o seguinte CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

*  {
	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.

Link para o arquivo de exemplo: Footer fixo no Rodapé

27 Comentários
Leia também:

Sua opinião:

Vamos elevar o nível de discussão. Exponha sua opinião, sua crítica.



RSS dos comentários deste post
URL para Trackback

27 Comentários

Andriano 12/01/2010 às 15:34

Muito legal, importante, para poucos conteudos mesmo.

Tilo 12/01/2010 às 15:35

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!

Guto Gomes 12/01/2010 às 15:37

Mas o rodapé fica por cima do conteúdo no final quando redimensionamos o browser. Nesse caso seria bacana deixar o rodapé fixo mesmo apenas usando o: “position:fixed; bottom:0;”. Mais bacana o Post. Parabéns

Evandro Henrique 12/01/2010 às 15:41

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.

leandro 12/01/2010 às 16:08

Eu vi que você “ignora” quem fala que algo não funciona no IE6, mas infelizmente, na minha realidade não consigo descartar esse público..

E Guto, em relação ao footer ficar por cima do conteúdo, é só setar um padding-bottom na div content com a altura do footer.

André Luís F. Guilherme 12/01/2010 às 18:08

Legal o post. Apenas sugiro colocar os divs de cores diferentes para ficar “mais claro” para os inciantes quem é o que. Parabéns

Jamerson 12/01/2010 às 19:44

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”.

Eliezer (@Malcomtux) 13/01/2010 às 10:07

Boa ideia, parabéns.

Dica: na página exemplo a ideia do efeito fica mais evidente com um texto menor.

Ariê 13/01/2010 às 10:45

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

Felipe Volpatto 13/01/2010 às 14:56

Muito bacana o post, já fiz muitas “gambiarras” para deixar o rodapé fico no bottom.
Único problema esta na hora de redimensionar o browser como o Guto Gomes falou, fora isso, é um ótimo artigo.

Jacson 13/01/2010 às 20:23

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.

Felipe Figueiredo 13/01/2010 às 20:25

Bom…
E desde quando margin negativa ou position são probidas? Ou de má qualidade?

Pelo menos estão de acordo com a W3C. Ótimas soluções, mas fico com o sticky footer q funciona em todos os browsers ou então com o javascript =P

leandro 14/01/2010 às 10:41

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?

Colocar Rodapé fixo no bottom | REPOSITÓRIO DA LÍA 14/01/2010 às 11:35

[...] Como fazer uma div ficar fixa no rodapé quando houver pouco conteúdo na página. Tags: CSS, footer Categorias: CSS | Sem comentários » [...]

Tweets that mention Colocar Rodapé fixo no bottom | Boas práticas de Desenvolvimento com Padrões Web -- Topsy.com 15/01/2010 às 01:42

[...] This post was mentioned on Twitter by Tableless, Cláudio Garcia, amf, Juliana, Larissa Palmieri and others. Larissa Palmieri said: RT: @tableless: Como fixar o FOOTER no rodapé quando houver pouco conteúdo: http://www.tableless.com.br/colocar-rodape-fixo-no-bottom [...]

Ariê 15/01/2010 às 09:15

Caro Leandro,

Não aconselho não o que utilizei no meu site.

Estou produzindo um novo já, este fiz correndo para concorrer a um job e a minah empresa não tinha site ainda. Realmente ele não está 100%.

O Black Hat não tem, se observar bem. Lá no site tem meus contatos ou mande um e-mail no form do site, ai trocamos figurinha e te explico melhor, caso não queira e não concorde com meu ponto de vista denunciê no google e verá que não será banido.

digita criação de sites no google e dê uma olhado no primeiro colocado, ele faz uso forte de black hat e fica em primeiro, fiz um comunicado ao google e eles disseram que o site estava de acordo, vai entender.

O Position pelo menos na Agência Click não eram muito a favor não eramos de usar, na abril e no Ig também não usei.

Não sou contra só dei uma dica para quem for fazer entrevistas.

Abraços

Leandro 16/01/2010 às 17:33

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!

Ariê 18/01/2010 às 12:10

Leandro!

Boa sorte então em sua entrevista!

Att,

Eduardo Ottaviani 24/01/2010 às 18:57

É, 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.

erico 27/01/2010 às 23:19

discutir market-share do IE sempre leva a conclusões engraçadas porque sabe-se que os acessos com esse browser caem completamente nos fins de semana, então há algo aí, para os que querem ver mais que tabelas….

Anderson 08/02/2010 às 09:21

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.

Felipe Morais 11/02/2010 às 18:26

Por favor, 12/01/2010 e um post desse nível?
Por isso deixei de ler este blog e nesse momento só confirmo minha opinião.

Evandro Oliveira 13/04/2010 às 10:59

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

André 02/08/2010 às 16:14

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

Lucas Peperaio - WebDesigner 30/08/2010 às 14:47

Utilizo esta técnica em praticamente todos os meu sites, realmente, é muito bom. Seria bacana mesmo se funcionasse em todos os browsers…mas ai já seria milagre