Publicado por: Paulo Fernandes | 13/out/2008

Rodapé no Final da Página – Independente da Resolução

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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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.

  1. Largura fixa de 790px;
  2. Centralizo o layout ao centro;
  3. Alinha o texto do layout a esquerda;
  4. Posiciono o container relativamente.
  5. 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.

  1. Posiciono ele absolutamente;
  2. Coloca ele na posição 0 do rodapé;
  3. Digo que terá uma altura de 35px;
  4. Informo que a altura da linha será de 35px;
  5. Alinho o texto ao centro;
  6. 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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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%;}

Anúncios

Responses

  1. mto bom seus posts.. nao manjo mto de css, mas lendo seu blog esclareci mta coisa..

    parabens

  2. Muito obrigado pelo comentário Charliston.

    Sempre que possível coloco novos post para facilitar a vida de todos!

    abraço

  3. Editado em 21/10/2008!

  4. Não entendi a correção. O que eu devo colocar em vez de “* html #tudo {height: 100%;}” exatamente?

    Obrigado.

  5. antigamente era


    height: auto !important;
    height: 100%;

    foi modificado para

    * html #tudo {height: 100%;}

    abraço

  6. Olá, parabéns pelo artigo.
    Foi muito útil para mim.

    Abs

  7. Muito obrigado Marcelo

    abraço

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

    • Ainda esta com problema Viviane?

  9. Nossa muito bom os posts…
    estou estudando CSS sozinho e seus posts estão me ajudando bastante, esclarecendo muitas duvidas…valeu!

    • Bom saber disso

  10. 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…

    • Verei se crio um post assim

    • mude a propriedade position deixando ela fixa assim:

      position: fixed;

  11. inútil, pois não funciona no IE6, ou seja, muitos visitantes não poderão ver esse efeito, não serve….

    • Não tenho o IE6 para testar, mas na epoca do post funcionava sim.

  12. Me ajudou muito!!

    Parabéns!

    tudo nos detalhes show!!

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

  14. Muito obrigada…….

  15. e akele rosto tosko ali embaixo no footer? ._.

  16. Naum entendi e melhor explicar por video ai sim Erei entende ::S entra em contato com meu e-mail preçisso de sua ajuda 😐

  17. 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!

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

  19. Valeu! Funcionou perfeitamente.


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

Categorias

%d blogueiros gostam disto: