HTML/CSS: rodapé que cola em baixo da pagina

Enviado por Webmaster em Agosto 2, 2011 - 18:56

Uma das funções mais procuradas na internet é o rodapé pegajoso em baixo das páginas. É incrivelmente fácil de se fazer mas também pode ser difícil de configurar corretamente. No exemplo que segue vamos fazer um rodapé que vai ficar no final da página enquanto o conteúdo não for ultrapassar a altura da página. Quando o conteúdo for passar a página o rodapé será empurrado para baixo de modo que ele nunca esteja cobrindo o conteúdo principal.

Conteúdo HTML

<html>
<body>

<div id="conteudoprincipal">
Conteúdo principal.
</div>

<div id="rodape">
<p> Conteúdo do rodapé </p>
</div>

</body>
</html>

Esse código HTML contém uma etiqueta div chamada "conteudoprincipal". O conteúdo principal vai empurrar o rodapé pra baixo. O rodapé será identificado pela etiqueta div “rodape”. Desta maneira podemos colocar instruções CSS especificas para cada elemento da página e determinar como o rodapé vai se posicionar.

As instruções CSS

html, body {
height: 100%; /*faz com que a página ocupe toda sua altura*/
}

* {
margin: 0; /*as margens poderiam estragar tudo*/
}

#conteudoprincipal {
height: 100%; /*empurra o rodapé para baixo */
}

#rodape {
  height: 50px; /*ajusta a altura do rodapé*/
  margin-top: -50px;/*estes números devem ser opostos*/
}

Você pode livremente modificar estes parâmetros, os comentários explicam o que cada instrução faz na página. Agora experimente e divirta-se!


Comentar