Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Insanity

Problema com footer

Por , em Desenvolvimento frontend

Recommended Posts

Insanity    9

Insanity
Postado

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):

 

JqWT2Wk.png

 

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á!QSE1xF2.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

danilobtos    0

danilobtos
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito