Olá pessoal hoje irei mostrar um exemplo prático de como colocar um rodapé fixo em sua página sem que sobrescreva seu conteúdo, sendo assim o mesmo irá se ajustando de acordo com a quantidade de conteúdo. Veja o exemplo abaixo, lembrando que no exemplo coloquei o código do CSS no mesmo arquivo, porém recomendo separar o mesmo em um devido arquivo de folha de estilo CSS.
Bom não vou ficar explicar muito, mais resumindo criei as div header, geral, esquerda e direita e o rodapé, zerei todas margens e apliquei um height 100% no html e no body e defini a div geral com o minimo de 100% no height e a deixei com o position relative , e o footer no caso o rodapé defini o position sendo fixed e bottom 0, coloquei o valor do margin-top igual ao do height, porém sendo negativo assim forçando ele e por fim coloquei o clear:both. Com tudo isso independente da quantidade de conteúdo o mesmo não ficará atrás do rodapé e a div do rodapé ficara sempre no rodapé e a div geral e content se ajustando a página como queremos.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Blog do Aquiles Maior</title>
<style>
* {
margin:0;
padding:0;
}
html, body {height:100%;}
.geral {
min-height:100%;
position:relative;
width:100%;
}
.header{
width:100%;
color: #fff;
background: #0076B0;
}
.content {
overflow:auto;
padding-bottom: 150px;
}
.aside {width:200px;}
.fleft {float:left;}
.fright {float:right;}
.footer {
position: fixed;
bottom:0;
width:100%;
margin-top: -100px; /* aqui coloco o valor negativo relativo a altura do rodapé, vejam que criei um rodapé gradinho rsrs */
height: 100px;
clear:both;
background: #0076B0;
}
</style>
</head>
<body>
<div class="geral">
<div class="header">
DIV HEADER TOPO
</div>
<div class="aside fleft">
DIV ESQUERDA
</div>
<div class="aside fright">
DIV DIREITA
</div>
<div class="content">
CONTEÚDO<Br>
<Br>
Do Alto Da Pedra
Rosa de Saron<Br>
<Br>
Encontro e sinto
Você é tudo o que sonhei<Br>
Não posso me conter
E mais que tudo eu quero ir<Br>
Uma vez que faz-me sentir alguém
É pra todo sempre<Br>
Não quero minha vida igual a tudo que se vê...
<Br>
(Refrão)<Br>
Em Você eu sei, me sinto forte<Br>
Com Você não temo a minha sorte<Br>
E eu sei que isso veio de Você (bis)<Br>
<Br>
Do alto da pedra<Br>
Eu busco impulso pra saltar<Br>
Mais alto que antes<Br>
Bem mais que tudo eu quero ir<Br>
Uma vez que faz-me sentir alguém<Br>
É pra todo sempre, não quero minha vida<Br>
Igual a tudo que se vê...<Br>
<Br>
(Refrão)<Br>
<Br>
</div>
</div>
<div class="footer">
FOOTER
</div>
</body>
</html>
Pessoal espero ter ajudo de certa forma ok, não esqueçam de dar uma comentada se gostaram ou não e se possível compartilhar nosso blog. Muito obrigado e até a próxima :]
Comentários
Postar um comentário