Eu usei isso para colocar meu rodapé no fundo e funcionou para mim:
HTML
<body>
<div class="allButFooter">
<!-- Your page's content goes here, including header, nav, aside, everything -->
</div>
<footer>
<!-- Footer content -->
</footer>
</body>
Essa é a única modificação que você precisa fazer no HTML; adicione- div
a à "allButFooter"
classe. Fiz isso com todas as páginas, tão curtas que sabia que o rodapé não grudaria no fundo e também páginas longas o suficiente para que eu já sabia que tinha que rolar. Eu fiz isso, para que eu pudesse ver se funciona corretamente no caso de o conteúdo de uma página ser dinâmico.
CSS
.allButFooter {
min-height: calc(100vh - 40px);
}
A "allButFooter"
classe tem um min-height
valor que depende da altura da viewport ( 100vh
significa 100% da altura da viewport) e da altura do rodapé, que eu já sabia que era40px
.
Foi tudo o que fiz e funcionou perfeitamente para mim. Eu não tentei em todos os navegadores, apenas no Firefox, Chrome e Edge, e os resultados foram os que eu queria. O rodapé fica na parte inferior e você não precisa mexer no índice z, na posição ou em outras propriedades. A posição de cada elemento no meu documento era a posição padrão, não a mudei para absoluta ou fixa, nem nada.
Trabalhando com design responsivo
Aqui está algo que eu gostaria de esclarecer. Esta solução, com o mesmo rodapé com 40px de altura, não funcionou como eu esperava quando estava trabalhando em um design responsivo Twitter-Bootstrap
. Eu tive que modificar o valor que eu estava subtraindo na função:
.allButFooter {
min-height: calc(100vh - 95px);
}
Provavelmente porque Twitter-Bootstrap
vem com margens e preenchimentos próprios, por isso tive que ajustar esse valor.
Espero que isso seja útil para vocês! Pelo menos, é uma solução simples de tentar e não envolve grandes alterações em todo o documento.