Criando um rodapé sempre embaixo do site

Esse é um problema clássico que todos nós desenvolvedores já passamos. Aprenda a criar um rodapé fixo no final do navegador. É uma solução que funciona bem em todos os navegadores.

Por | @oficinadanet Programação

Esse é um problema clássico que todos nós desenvolvedores já passamos. Já cruzei com mil soluções para o problema, porém esse final de semana precisei de algo e nas minhas pesquisas encontrei uma solução que funcionou perfeitamente, melhor do que quaquer uma que já tenha usado.

O Problema

Criando um rodapé sempre embaixo do site

Como vemos na imagem acima, o rodapé do site seguindo uma estrutura normal de HTML ficaria logo após a div do conteúdo.

A solução
Criando um rodapé sempre embaixo do site

Como vemos na imagem acima, esse é o resultado final que queremos.

O código HTML
</div>
</div>
</div> </div>


O código CSS
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
.tudo {
   min-height:100%;
   position:relative;
}
.topo {
   background:#ff0;
   padding:10px;
}
.conteudo {
   padding:10px;
   padding-bottom:60px;   /* Mesma Altura do Rodapé */
}
.rodape {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Mesma Altura do Rodapé */
   background:#6cf;
}


Por que essa é a melhor solução?
  • Funciona em praticamente todos os browsers (menos em IE 6, existe solução mas não vou nem postar Wink)
  • CSS 100% válido e sem Hacks
  • Sem javascript



Resultado: (ver em tela cheia)

Mais sobre: css dicas
Share Tweet
Recomendado
Comentários
Destaquesver tudo

Siga nossas contas no Twitter