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=”https://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=”https://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=”https://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=”https://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%;}
Aprenda CSS 
mto bom seus posts.. nao manjo mto de css, mas lendo seu blog esclareci mta coisa..
parabens
By: Charliston on 16/out/2008
at 18:50:55
Muito obrigado pelo comentário Charliston.
Sempre que possível coloco novos post para facilitar a vida de todos!
abraço
By: Paulo Fernandes on 17/out/2008
at 08:46:57
Editado em 21/10/2008!
By: Paulo Fernandes on 21/out/2008
at 08:43:48
Não entendi a correção. O que eu devo colocar em vez de “* html #tudo {height: 100%;}” exatamente?
Obrigado.
By: Thiago on 14/nov/2008
at 00:31:16
antigamente era
height: auto !important;
height: 100%;
foi modificado para
* html #tudo {height: 100%;}
abraço
By: Paulo Fernandes on 14/nov/2008
at 07:50:03
Olá, parabéns pelo artigo.
Foi muito útil para mim.
Abs
By: Marcelo on 22/nov/2008
at 08:51:00
Muito obrigado Marcelo
abraço
By: Paulo Fernandes on 24/nov/2008
at 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.
By: Viviane on 11/dez/2008
at 21:27:48
Ainda esta com problema Viviane?
By: Paulo Fernandes on 21/mar/2010
at 11:53:14
Nossa muito bom os posts…
estou estudando CSS sozinho e seus posts estão me ajudando bastante, esclarecendo muitas duvidas…valeu!
By: Wagner on 4/maio/2009
at 17:24:33
Bom saber disso
By: Paulo Fernandes on 21/mar/2010
at 11:52:38
porcaria cara, eu so queria que meu rodape fosse fixo, para quando rolasse a barra de rolagem ela ficasse parada, imovel, mais nao acho nenhum post sobre isso… saco viu…
By: Richardson on 15/mar/2010
at 19:10:12
Verei se crio um post assim
By: Paulo Fernandes on 21/mar/2010
at 11:52:19
mude a propriedade position deixando ela fixa assim:
position: fixed;
By: Leandro Severino on 8/out/2012
at 15:45:44
inútil, pois não funciona no IE6, ou seja, muitos visitantes não poderão ver esse efeito, não serve….
By: Robson on 19/mar/2010
at 22:40:51
Não tenho o IE6 para testar, mas na epoca do post funcionava sim.
By: Paulo Fernandes on 21/mar/2010
at 11:51:53
Me ajudou muito!!
Parabéns!
tudo nos detalhes show!!
By: Tiago Rocha on 15/abr/2010
at 11:36:31
Realmenteo IECA quebra as pernas, funciona perfeitamente o Firefox, Chrome mas IE6 nem pensar…
Ainda não encontrei um solução para por o rodapé fixo.
By: Gilberto on 5/maio/2010
at 22:17:14
Muito obrigada…….
By: lilian on 2/set/2011
at 20:12:25
e akele rosto tosko ali embaixo no footer? ._.
By: fail on 13/out/2011
at 15:23:34
Naum entendi e melhor explicar por video ai sim Erei entende ::S entra em contato com meu e-mail preçisso de sua ajuda 😐
By: DjAtualizado on 11/jan/2012
at 20:53:40
rodapé fixo porém se o conteúdo for maior do que a tela, o conteúdo vai e o rodapé fica no meio da tela!
By: GABRIEL LEITE on 1/nov/2012
at 14:31:46
essas loucuras não ajudam em nada.
O melhor a fazerem é centralizar o site:
Faça o site normalmente e no frame insira o endereço do site e pronto
veja o código: qualquer dúvida me envie e-mail: pwlinternet@gmail.com
ou acesse meu site: http://www.pwlinternet.com.br
Nova pagina 1
Layout Centralizado
By: paulo on 17/jan/2013
at 15:37:25
Valeu! Funcionou perfeitamente.
By: blogdeteste433 on 9/maio/2017
at 10:38:40