Estoy probando Bootstrap y me preguntaba cómo puedo arreglar el pie de página en la parte inferior sin que desaparezca de la página si se desplaza el contenido.
Respuestas:
Para obtener un pie de página que se adhiera a la parte inferior de su ventana gráfica, dele una posición fija como esta:
footer {
position: fixed;
height: 100px;
bottom: 0;
width: 100%;
}
Bootstrap incluye este CSS en la sección Navbar> Placement con la clase fixed-bottom
. Simplemente agregue esta clase a su elemento de pie de página:
<footer class="fixed-bottom">
Documentos de Bootstrap: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom
fixed-bottom
no hice lo que esperaba, sino static-bottom
que lo hice para respetar la altura del contenido de la página.
Agrega esto:
<div class="footer navbar-fixed-bottom">
https://stackoverflow.com/a/21604189
EDITAR: la clase navbar-fixed-bottom
se ha cambiado a fixed-bottom
partir de Bootstrap v4-alpha.6.
http://v4-alpha.getbootstrap.com/components/navbar/#placement
Agrega esto:
<div class="footer fixed-bottom">
Agregue z-index:-9999;
a este método, o cubrirá su barra superior si es así 1
.
Puede hacer esto envolviendo el contenido de la página en un div con el siguiente estilo de identificación aplicado:
<style>
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
</style>
<div id="wrap">
<!-- Your page content here... -->
</div>
Trabajó para mi.
Es posible que desee comprobar ese ejemplo: http://getbootstrap.com/2.3.2/examples/sticky-footer.html