Eternia - Blog da Parque Internet » HTML http://eternia.com.br Por Andreo Costa Sat, 04 Sep 2010 02:46:13 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Como deixar o FOOTER fixo no rodapé quando se tem pouco conteúdo na página. http://eternia.com.br/blog/220 http://eternia.com.br/blog/220#comments Sun, 17 Jan 2010 16:32:17 +0000 Andreo Costa http://eternia.com.br/?p=220 Você já deve ter precisado colocar o footer fixo no rodapé quando houve pouco conteúdo na página, por reclamação daquele cliente que acha que tá sobrando muito abaixo do site.

Há uma técnica no CSS que nos permite fazer essa façanha. Não funciona no IE6 (só pra variar).

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>Eternia.com.br - o blog da Parque Internet</title>
</head>
 
<body>
 
<div>
	<div>
		HEADER
	</div>
	<div>
		ESQUERDA
	</div>
	<div>
		DIREITA
	</div>
	<div>
		<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit...
		</p>
		<p>
		Duis id metus enim, sed dignissim magna. Quisque dapibus...
		</p>
	</div>
	<div>
		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 vai fazer com que o footer 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 define 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: http://www.tableless.com.br/colocar-rodape-fixo-no-bottom

]]> http://eternia.com.br/blog/220/feed 2