Rodapé sobrepõe conteúdo

[Ewerton Madeira 0]

Bom dia pessoal!

 

Então, eu to com um problema que está me atormentando desde o começo do desenvolvimento do meu site. O rodapé não fica no final da página, ele fica no final da janela, E conforme a resolução da janela vai diminuindo, o rodapé avança sobre o conteúdo. Ele fica no final somente se eu delimitar o "min-height" da div "container" em pixels. O que eu não posso fazer, pois várias páginas são geradas pelo banco de dados, e elas não tem o mesmo tamanho.

 

Eu já procurei todo tipo de solução pra isso na internet, inclusive aqui no fórum. Mas nada resolveu meu problema.

 

Vou deixar aqui o CSS das minhas DIV's e como elas estão posicionadas. Se alguém puder ajudar eu agradeço demais.

 

<div class="container">
	<div class="topo">
		<div class="titulo-box"></div>
	</div>
	<div class="container-box">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</div>
	<div class="rodape"></div>
</div>

Obs.: Eu já tentei colocar o rodapé fora da div "container" e também não funcionou.

 

html, body{
	height:100%;
}

.container{
	width:100%;
	margin: 0 auto;
	height:auto;
	min-height:100%;
	position:relative;
}

.titulo-box{
	text-align:center;
}

.container-box{
	width:964px;
	margin: 0 auto;
	height:auto;
	position:relative;
}

.box1, .box2, .box3 {
	height: 450px;
	width: 320px;
	position:relative;
	float:left;	
}

.rodape{
	width:100%;
	height:60px;
	clear:both;
	position:absolute;
	bottom:0;
}

 

[reidark 5]

Experimente tirar os positions das box. Position é um elemento perigoso, ele pode facilmente "desestruturar" um layout em 2 segundos.

Lembre-se que o position:absolute se localiza no layout de acordo com o position:relative mais próximo.

 

Tire um print pra ver como está, assim fica mais fácil de resolver.

[Ewerton Madeira 0]

Através do seu comentário eu fui tentando aqui mas ainda não resolvi todo o problema. Eu retirei toda a configuração de posicionamento do rodape e ele agora está ficando sempre abaixo dos box. Só que ele não fica no final da página. Se os box tiverem um comprimento pequeno ele fica logo abaixo, ao invés de ficar no final da página.

[reidark 5]

Isso é porque ele tá marcado para ficar sempre abaixo das box.

Uma tática boa é colocar na sua div container-box a propriedade:

 

margin-bottom: 200px;

ou colocar isso na sua div footer:

 

margin-top: 200px;

 

Vai ajustando até ficar como você quer.

Caso isso não seja o que você procura, você pode brincar com o temido height 100%: http://www.maujor.com/blog/2013/03/08/por-que-height-100-nao-funciona/

 

Mas entenda que, conforme você preenche as box com conteúdo ela vão automaticamente "empurrando" o footer pra baixo, até ele ficar no final, sem aquela parte branca a baixo dele.

 

Abraços!

[Ewerton Madeira 0]

Agora deu certo!

 

O seu comentário me deu uma luz. Não tem como ele ficar no final da página sendo que os box tem tamanho definido em pixels. Então eu coloquei ele depois da div "container" que tem o comprimento como "100%". Agora ele fica sempre no final da página, independente dela ser curta.

 

Obrigado!