He usado esto para pegar mi pie de página en la parte inferior y funcionó para mí:
HTML
<body>
<div class="allButFooter">
<!-- Your page's content goes here, including header, nav, aside, everything -->
</div>
<footer>
<!-- Footer content -->
</footer>
</body>
Esa es la única modificación que tiene que hacer en el HTML, agregue eso div
con la "allButFooter"
clase. Lo hice con todas las páginas, las que eran tan cortas, sabía que el pie de página no se pegaría al final, y también páginas lo suficientemente largas que ya sabía que tenía que desplazarme. Hice esto, por lo que pude ver que funciona bien en el caso de que el contenido de una página sea dinámico.
CSS
.allButFooter {
min-height: calc(100vh - 40px);
}
La "allButFooter"
clase tiene un min-height
valor que depende de la altura de la ventana gráfica ( 100vh
significa el 100% de la altura de la ventana gráfica) y la altura del pie de página, que ya sabía que era 40px
.
Eso fue todo lo que hice y funcionó perfectamente para mí. No lo he probado en todos los navegadores, solo en Firefox, Chrome y Edge, y los resultados fueron los que quería. El pie de página se pega al final y no tiene que meterse con el índice z, la posición ni ninguna otra propiedad. La posición de cada elemento en mi documento era la posición predeterminada, no la cambié a absoluta o fija ni nada.
Trabajando con diseño receptivo
Aquí hay algo que me gustaría aclarar. Esta solución, con el mismo pie de página que tenía 40px de altura, no funcionó como esperaba cuando estaba trabajando en un diseño receptivo usando Twitter-Bootstrap
. Tuve que modificar el valor que estaba restando en la función:
.allButFooter {
min-height: calc(100vh - 95px);
}
Esto probablemente se deba a que Twitter-Bootstrap
viene con sus propios márgenes y rellenos, por eso tuve que ajustar ese valor.
¡Espero que esto sea de alguna utilidad para ustedes! Al menos, es una solución simple para probar, y no implica hacer grandes cambios en todo el documento.