Rodapé sempre no fim da página (sem javascript)

Como deixar um rodapé posicionado sempre no fim da página sem sobrepor o conteúdo.

 
12/12/2007 09:04
Por 
Nagüeva Guilherme
  |  
Votos (10)
 
 
  |  
Comentários (5)

Para o novo site da Hiperquímica (que ainda não foi ao ar) precisei de uma solução para manter o rodapé sempre no fim da página, independente da quantidade de conteúdo que viria antes. Uma pesquisa rápida no Google me levou até algumas alternativas que utilizavam javascript (não me agradaram nem um pouco) e outras que utilizavam somente CSS.

As alternativas com CSS em sua maioria utilizavam duas propriedades para o rodapé: ''position:absolute'' e ''bottom:0''. O problema dessa solução é que se redimensionarmos a janela do navegador, o rodapé sobrepõe o conteúdo, veja um exemplo dessa aplicação.

Procurando em sites gringos, encontrei uma solução interessante no qrayg.com. Adaptei o arquivo e disponibilizei um exemplo com código-fonte mais enxuto, confira!

O arquivo com exemplo dessa solução está bem simples, então acredito que não haverá dúvidas. Mas se precisarem de algum esclarecimento, é só comentar!


Gostou desse artigo? Acesse a publicação original em Nagueva.com.

Nas Seções: Criação , Desenvolvimento , Design , Web etc
Cartão Vermelho: |
Sobre o Autor: Veja meu perfil
comentáriose-mail

O que você achou deste comentário?
Rodrigo Medeiros
Muito bom o artigo. Era revoltante como uma coisa tão simples dava tanto trabalho para se feita. Eu mesmo usava o JS como solução (até agora). Já vi que mais tarde vou ter muito o que fazer para substituir os códigos.
2007-12-13 09:31:32.
O que você achou deste comentário?
Rodrigo Brandão
Gostei muito do artigo! Alias eu estava procurando essa solução e acabei encontrando aqui do nada! Otimo post!!
2007-12-18 04:07:20.
O que você achou deste comentário?
Nagüeva Guilherme
Bom que vocês gostaram. Como desenvolvedor eu sei que realmente era complicado fazer isso, ou utilizava javascript ou soluções que não eram suficientes.
Mais uma oportunidade que o CSS teve de nos surpreender.
2007-12-18 04:53:29.
O que você achou deste comentário?
Fabio
Sou desenvolvedor web e despois que descobri o CSS nunca mais usei tabela, e em relação a construção de layout com CSS vc pode fazer o que quiser, já conhecia essa solução, que mais uma prova de que CSS é tudo na construção de bom layout, aproveitando para falar do CSS3 que ta vindo ai com bordas arredondadas e shadow(sombra) nas letras.....
2007-12-20 10:57:46.
O que você achou deste comentário?
Paulo
Infelizmente o uso de FLOAT para controlar colunas dentro do CONTENT faz com que no FireFox o rodapé funcione como no primeiro exemplo.
2008-03-10 08:50:39.

Novo comentário

É preciso estar logado para postar um comentário.
Clique aqui para se logar ou registrar.
Webinsider
Desta.ca
Creative Commons