(Resolvido) Rodapé sempre ao final da página

[Rafael Laurindo]

Pessoal, como fazer para um objeto se referenciar do final da página para o início verticalmente? Porque alinhar um objeto usando o margin-top, ou top é simples, pois o mesmo se referencia de cima para baixo. Mas como alinhar um objeto como se o início dele fosse o fundo da página?

Editado Outubro 6, 2010 por Rafael Laurindo

[*FIT*]

Usando bottom não rola?

[Rafael Laurindo]

Como assim? Seu simplesmente fizer bottom:0px; ele colaria a div ao final da página?

[*FIT*]

Desde que não tenha nenhuma div abaixo segurando ela, sim.

[Rafael Laurindo]

Com tristeza vou dizer que não tem elemento algum embaixo dessa div, ela nem saiu do lugar quando eu fiz isso, gostaria muito que funcionasse. Essa div está embaixo de todas as outras e dentro de um body que só tem background-color modificado e a margin que é de 0px, o position dessa div não foi modificado, portanto é static. Não sei o que falta para funcionar. Você pode postar um pequeno código de exemplo, meu amigo Felipe?

Editado Setembro 15, 2010 por Rafael Laurindo

[*FIT*]

Entendi, na verdade você não está usando nenhuma div acima dela.

Nesse caso realmente não funciona, e nunca achei nada para isso.

O CSS funciona como um quebra-cabeças, só que sempre começando a montar por cima, tanto que nunca vi alguém começar estruturar um site por baixo, sempre pelo topo.

O que você está pretendendo fazer, é montar uma página usando apenas o final dela? Não teria mais nada em cima?

[Rafael Laurindo]

Sim Felipão, tem um monte de div em cima dessa última div que quero como rodapé. Acho que me expressei mal e fiz você entender errado.

Editado Setembro 14, 2010 por Rafael Laurindo

[*FIT*]

Entendi, nesse caso fica fácil, use clear: both para manter ele sozinho horizontalmente, e alinhe de acordo com a div de cima.

Quando disse que precisava alinhar referenciando por baixo, eu pensei que não iria ter div em cima, mas como tem, não tem porque complicar referenciando por baixo.

[Rafael Laurindo]

Pense comigo, se eu referenciar por baixo, será mais fácil manter ele sempre ao final da página de forma mais independente. Me referenciando pelo objeto anterior dificulta, e se eu precisar mexer nesse objeto anterior? Com certeza precisarei mexer no rodapé novamente, entende? Sem contar a diferença dos malditos navegadores, cada um usa a tela de uma forma diferente, uns usam uma barra de status maior horizontalmente, outros usam menu. Você posiciona um objeto em um navegador, quando vai ver em outro não tem nada a ver com o que você fez no anterior. Aí é foda né.

Não entendi o que quiz dizer com

manter ele sozinho horizontalmente

. Editado Setembro 14, 2010 por Rafael Laurindo

[*FIT*]

Sim, é sempre complicado, mas temos que passar por esses problemas, afinal, nem tudo é flores. rs

Então Rafael, desde que fique tudo muito bem estruturado, nunca terá problemas caso precise mexer na div de cima, pois pense comigo, se aumentar a div de cima, a de baixo automaticamente desce, e se diminuir, ela automaticamente sobe. É justamente por isso que os sites e as folhas de estilos são estruturadas de cima para baixo.

Ao contrário sim eu vejo problemas, pois se o rodapé estiver referenciado por baixo, e você diminuir a div de cima, o rodapé vai continuar lá em baixo, não vai acompanhar.

Caso você tenha conteúdos dinâmicos, onde você não sabe qual vai ser o tamanho, se for muito grande, ele vai passar por cima do rodapé, e não empurra-lo. Entende?

Mesmo que ache um jeito de referenciar por baixo, você vai ter esses tipos de problemas. Sinceramente, até hoje nunca vi um site feito de baixo para cima.

Em relação a manter sozinho horizontalmente, talvez eu me expressei de uma forma complicada, isso que dizer que mantém a div do rodapé sozinha, ela não deixa nenhuma outra div se fixar nas laterais da mesma, apenas em cima ou em baixo.

[Rafael Laurindo]

Entendi o que você falou, encontrei a solução aqui, mas preciso ainda de ajuda.

http://maujor.com/tutorial/rodape-embaixo-da-janela.php

Editado Setembro 15, 2010 por Rafael Laurindo

[*FIT*]

Nesse exemplo ele continua referenciando por cima, o que ele fez, foi a div principal crescer. Logo o rodapé também desce, veja que pra div #tudo ele colocou um min-height de 100%, ou seja, mesmo que não tenha conteudo, o tamanho minimo dela vai ser o tamanho da tela em si. Depois só acrescentou um padding-bottom na mesma, para que ela mantenha uma distancia do rodapé e não passe por cima.

O rodapé por sua vez, está como absoluto para não depender de nada, e com bottom:0 como eu já havia afirmado alguns posts acima

[Rafael Laurindo]

Não poderia ter explicado melhor, mas uma coisa ainda me intriga, o que exatamente está fazendo a div de clear:both.

Editado Setembro 15, 2010 por Rafael Laurindo

[*FIT*]

Essa função apenas mantem um div sozinha na linha!

Para que você entenda melhor:

teste o exemplo.

<div style="border: 1px solid; float:left; width:200; height:200px; margin:10px;"></div>
<div style="border: 1px solid; width:200; height:200px; margin:10px; float:left;"></div>

e logo depois acrescente clear:both na div debaixo, e veja o que muda, assim você vai entender visualmente o que ele faz.

[Rafael Laurindo]

Entendi perfeitamente. Mesmo o float estando presente na div anterior, a posterior desceu, ficando sozinha na linha.