Rodapé Fixo no fim da Página ~ SobMedida Tutoriais

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.

Rodapé Fixo no fim da Página

3 comentários:

Busca

ESTAMOS RECRUTANDO!!

Posts Populares