Pie de página fijo en Bootstrap


86

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:


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


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



3

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


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.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.