Pie de página fijo en Bootstrap

Respuestas:

207

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

Josh KG
fuente
Esto y el comentario de @Daniel-Tero lo hicieron por mí.
jmng
4
Si una página tiene desplazamiento, no está funcionando correctamente.
Arnab
2
fixed-bottomno hice lo que esperaba, sino static-bottomque lo hice para respetar la altura del contenido de la página.
Gjaa
7

Agrega esto:

<div class="footer fixed-bottom">
Matheus Gomes
fuente
3

Agregue z-index:-9999;a este método, o cubrirá su barra superior si es así 1.

Daniel Tero
fuente
0

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.

Señor puercoespín
fuente
-4

Es posible que desee comprobar ese ejemplo: http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Vladimir Dimchev
fuente
2
Eso es para pie de página adhesivo, no para pie de página fijo: /
az_
@aaronz ¿cuál es la diferencia?
Arsen Ibragimov
4
@ArsenIbragimov El pie de página fijo se desplaza hasta el final de la página si el contenido es más alto que la vista. El pie de página fijo siempre está visible en la parte inferior de la vista.
az_