Opa!
Fazia tempo que eu não postava não é. Bem aqui vai um rápido post para demonstrar a técnica do “Rodapé no Final da Página – Independente da Resolução”.
Devemos criar um código da seguinte forma:
<!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”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>..:: Rodapé no Final da Página – Independente da Resolução by aprendacss.wordpress.com ::..</title>
</head>
<body>
<div id=”tudo”>
<div id=”cabecalho”>
<h1><a href=”http://aprendacss.wordpress.com”>Aprenda CSS</a></h1>
</div>
<div id=”conteudo”>
<p>Aqui vai o conteudo da página.</p>
</div>
<div id=”rodape”>
<p>
Todos Direitos Reservados – <a href=”http://aprendacss.wordpress.com”><strong>Aprenda CSS</strong></a> – 2008
</p>
</div>
</div>
</body>
</html>
Após ter o código base, devemos criar um arquivo css que informe que o corpo do documento tem o height de 100%.
html, body {
height: 100%;
}* html #tudo {height: 100%;}
No trecho acima, informo para o html e body ter um height de 100%. E informo que a div#tudo deve ter um height de 100% também.
#tudo {
width: 790px;
margin: 0 auto;
text-align: left;
position: relative;
min-height: 100%;
}
Aqui está um ponto importante. Explicarei linha a linha deste trecho acima.
- Largura fixa de 790px;
- Centralizo o layout ao centro;
- Alinha o texto do layout a esquerda;
- Posiciono o container relativamente.
- Defino que a altura minima será de 100% [ para navegadores mais recentes - FireFox por exemplo ]
#conteudo {
padding-bottom: 50px;
}
Acima foi definido um padding-bottom, apenas para o texto não ficar colado no rodapé.
#rodape {
position: absolute;
bottom: 0;
height: 35px;
line-height: 35px;
text-align: center;
width: 100%;
}
Explicarei linha a linha para ficar bem claro.
- Posiciono ele absolutamente;
- Coloca ele na posição 0 do rodapé;
- Digo que terá uma altura de 35px;
- Informo que a altura da linha será de 35px;
- Alinho o texto ao centro;
- Digo que a largura será de 100%;
Pronto temos o nosso layout completo. Abaixo está o código completo para quem quiser ver! Coloquei no código abaixo algumas cores, para vocês verem a diferença. Esqueci de comentar que para um melhor resultado sempre é bom utilizar a técnica de CSS Reset.
<!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”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>..:: Rodapé no Final da Página – Independente da Resolução by aprendacss.wordpress.com ::..</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}html, body {
height: 100%;
}* html #tudo {height: 100%;}
body {
background-color: #CCC;
}#tudo {
width: 790px;margin: 0 auto;
text-align: left;
position: relative;
min-height: 100%;
background-color: #FFF;
}#conteudo {
padding-bottom: 50px;
}#rodape {
position: absolute;
bottom: 0;
height: 35px;
line-height: 35px;
text-align: center;
width: 100%;
background-color: #0FF;
}#cabecalho {
background-color: #FF0;
}
</style>
</head>
<body>
<div id=”tudo”>
<div id=”cabecalho”>
<h1><a href=”http://aprendacss.wordpress.com”>Aprenda CSS</a></h1>
</div>
<div id=”conteudo”>
<p>Aqui vai o conteudo da página.</p>
</div>
<div id=”rodape”>
<p>
Todos Direitos Reservados – <a href=”http://aprendacss.wordpress.com”><strong>Aprenda CSS</strong></a> – 2008
</p>
</div>
</div>
</body>
</html>
Até o próximo galera.
Fonte base: http://themaninblue.com/writing/perspective/2005/08/29/
Editado em 21/10/2008:
Substituição de
height: auto !important;
height: 100%;
por
* html #tudo {height: 100%;}
mto bom seus posts.. nao manjo mto de css, mas lendo seu blog esclareci mta coisa..
parabens
Por: Charliston em 16/Out/2008
às 18:50:55
Muito obrigado pelo comentário Charliston.
Sempre que possível coloco novos post para facilitar a vida de todos!
abraço
Por: Paulo Fernandes em 17/Out/2008
às 08:46:57
Editado em 21/10/2008!
Por: Paulo Fernandes em 21/Out/2008
às 08:43:48
Não entendi a correção. O que eu devo colocar em vez de “* html #tudo {height: 100%;}” exatamente?
Obrigado.
Por: Thiago em 14/Nov/2008
às 00:31:16
antigamente era
height: auto !important;
height: 100%;
foi modificado para
* html #tudo {height: 100%;}
abraço
Por: Paulo Fernandes em 14/Nov/2008
às 07:50:03
Olá, parabéns pelo artigo.
Foi muito útil para mim.
Abs
Por: Marcelo em 22/Nov/2008
às 08:51:00
Muito obrigado Marcelo
abraço
Por: Paulo Fernandes em 24/Nov/2008
às 07:46:44
Olá!!!
Fiz exatamente como esse codigo e as divs ficaram posicionadas uma logo abaixo da outra… nao seguindo o min-height: 100% eu acredito…seria algo com o porcaria do IE6???
Pode me ajudar?
Obrigada.
Por: Viviane em 11/Dez/2008
às 21:27:48
Nossa muito bom os posts…
estou estudando CSS sozinho e seus posts estão me ajudando bastante, esclarecendo muitas duvidas…valeu!
Por: Wagner em 4/Mai/2009
às 17:24:33