Cássio Fabre
Ter um rodapé no site é algo que não conseguimos nos imaginar sem. Porém, este pode se tornar dor de cabeça, quando não feito de forma correta. Quando falando de sites, veja bem, site e não blog, muitas das vezes nos deparamos com situações em que não temos conteúdo suficiente para preencher toda extensão vertical do navegador e, nestes casos, o nosso footer sobe para o meio da tela, deixando o site complemente descaracterizado. Hoje aprenderemos a sanar essa dor de cabeça! Abra seu escritor de código preferido e mãos à obra.
Suponhamos o seguinte HTML de um site qualquer:
<html> <head> </head> <body> <div class="wrap"> <div class="header-container"> </div><!-- .header-container --> <div class="footer-container"> </div><!-- .footer-container --> </div><!-- .wrap --> </body> </html>Algo simples, mas tudo que nós precisamos. Agora, vamos colocar o CSS que fará com que o rodapé fique sempre ao fundo do navegador. Em arquivo separado, ou dentro da tag <style>, se você não sabe qual fazer, leia a Parte 1 da série Aprenda HTML e CSS na Prática para entender melhor.
html, body, .wrap{
overflow-x: hidden;
height: 100%;
}
body > .wrap{
height: 100%;
min-height: 100%;
}
.wrap{
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
.header-container{
width: 978px;
height: 200px;
background: #123456;
}
.footer-container{
width: 100%;
height: auto !important;
position: absolute;
clear: both;
bottom: 0 !important;
padding-bottom: 5px;
background: #357531;
}
O que fazemos aqui, é dizer ao navegador que o body tem 100% de altura e fazemos com que o footer fique sempre no fundo com o bottom: 0 !important;. Você pode se perguntar: mas então só fazendo essa configuração no bottom, não daria certo? Na verdade não, pois essa configuração faz com que o footer se fixe no fim do body. Daí a necessidade de definirmos o body com height: 100%. Isso faz com que o body tenha o tamanho do monitor, independente de qual seja, logo, o footer vai se fixar no fim da página.Bom, testem o código, trocando as cores das divs para entender melhor a localização de cada uma.
Até a próxima.
Deu pra ajudar, Obrigado!
ResponderExcluiro meu n fica ele fica no meio da pagina
ResponderExcluirEu não manjo muito de html e css. Sou bem novo nesse ramo. Bom eu precisava fazer um rodapé parecido com esse aqui mirago.com.br
ResponderExcluirVocê poderia me ajudar?