Tenho uma página na qual há uma div
com vários conteúdos dentro, que se modificam de acordo com o desejo do usuário. Logo abaixo existe um outro div
que é o Rodapé.
Caso eu coloque um position: relative
, o rodapé irá adequar sua posição de acordo com o tamanho da página, porém ele não fica "preso" em baixo (sem nenhum espaço até o fim da página) quando a janela do navegador é redimensionada para um tamanho menor.
Já se eu colocar um position: absolute
, o rodapé irá ficar fixo no fim da página, mas não se adequará ao tamanho da janela.
Mas gostaria de fixar um bottom: 0px
, semelhante ao que acontece caso eu aplique um position: absolute
, mas de forma que se o conteúdo da página for maior, o rodapé não sobreponha a página.
Alguém sabe como seria possível fazer isso?
Meu exemplo está aqui no JsFiddle.
*{margin: 0;}
. Coloque no começo do seu css, isto interferirá em todos os elementos da sua página em que omargin
não estiver especificado.