Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, tudo bem?
Então, estou tentando colocar um footer no meu sistema, bem simples e fino, escrito só "Todos os diretos reservados". Coloco os atributos do CSS: position: absolute e bottom: 0;
Segue o código do footer:
.footer{
position: absolute;
bottom: 0;
margin-top: 20px;
text-align: center;
color: #888;
font-size: 10px;
padding: 6px;
background: white;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}O problema é que ele fica onde está as limitações bottom da página, o que é esperado, mas muitas vezes, quando a página tem bastante conteúdo ele fica sobrepondo o conteúdo e não lá embaixo.
:
Segue um print do problema (Isso é uma página com mais conteúdo que dá para rolar para baixo):
E essa é uma página que ele dá certo (pois não tem rolagem):
Já pesquisei como resolver esse problema, e na maioria das soluções, pede-se para criar uma div content que tenha um min-height de 100%, ou fazer isso com o body e html, mas simplesmente não deu certo!
Espero que tenham entendido o problema e agradeço desde já!
Tem como por o link para darmos uma olhada?
Está só no servidor local
Insanity,
Se você adicionar position: absolute ou fixed, o footer vai ocupar uma parte da tela enquanto você rola a página. O certo é o position ser relative e estar no fim de todo o conteúdo.
Pense como se fossem blocos, se forem adicionados conteúdos acima, então obrigatoriamente o footer vai para o fim da página. Qual seria o problema nisso?
Veja o exemplo:
<head>
...
</head>
<body>
<header>...</header>
<section>Aqui vem seu conteúdo</section>
<footer>
<?php echo Date('Y') ?> © PF/PJ - Todos os direitos reservados
</footer>
</body>Quanto mais informação eu tiver dentro da section, o footer continua no fim da página. Se você não tiver conteúdo suficiente e sobre um espaço em branco no fim, você pode corrigir isso com jQuery.
Você pega a altura total da viewport e da div que contém todo o conteúdo. Se a height do conteúdo não for maior que a viewport, então ele atribui o position: absolute; bottom: 0; ao footer, caso contrário, continua como está.
Abraços!
Muito obrigado, Henrique!
Olá Insanity, tudo bem...
Já tentou utilizar o position:fixed; tive um problema parecido e também estava 'absolute', alterei para fixed e funcionou.
At;
Danilo.