Encontramos los fragmentos aquí que funcionan muy bien para bootstrap

Html:

 
 
Your content here
 
 
  

CSS:

 html, body { height: 100%; } #wrap { min-height: 100%; } #main { overflow:auto; padding-bottom:150px; /* this needs to be bigger than footer height*/ } .footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both; padding-top:20px; } 

Fuente: demostración y tutorial (ya no está disponible; RIP )

Esto ahora se incluye con Bootstrap 2.2.1.

Utilice el componente de la barra de navegación y agregue la .navbar-fixed-bottom :

No te olvides de agregar el body { padding-bottom: 70px; } body { padding-bottom: 70px; } o de lo contrario, el contenido de la página puede estar cubierto.

Documentos: http://getbootstrap.com/components/#navbar-fixed-bottom

Un ejemplo de trabajo para Twitter bootstrap NOT STICKY FOOTER

Necesitas al menos un elemento con un #footer

Cuando no desee la barra de desplazamiento si el contenido se ajusta a la pantalla simplemente cambie el valor de 10 a 0
La barra de desplazamiento aparecerá si el contenido no se ajusta a la pantalla.

A continuación, le mostramos cómo implementar esto desde la página oficial:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

¡Acabo de probarlo ahora y FUNCIONA EXCELENTE! 🙂

HTML

   
  
 
 
Sticky footer
 
 
Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.
 
 
 
 
 
 
Example courtesy Martin Bean and Ryan Fait.
 
 
  

El código CSS relevante es este:

 /* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: auto !important; height: 100%; /* Negative indent footer by it's height */ margin: 0 auto -30px; } /* Set the fixed height of the footer here */ #push, #footer { height: 30px; } #footer { background-color: #f5f5f5; } /* Lastly, apply responsive CSS fixes as necessary */ @media (max-width: 767px) { #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } } 

Para Sticky Footer utilizamos dos DIV's en el HTML para el efecto básico de pie de página adhesivo . Escribe así:

HTML

CSS

 body,html { height:100%; } .container { min-height:100%; } .footer { height:40px; margin-top:-40px; } 

Ejemplo oficial mucho más simple: http://getbootstrap.com/examples/sticky-footer-navbar/

 html { position: relative; min-height: 100%; } body { margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; height: 60px; background-color: #f5f5f5; } 

Bueno, encontré una mezcla de navbar-inner y navbar-fixed-bottom

 
 
 
ver 1.0.1
 
  

Parece bueno y funciona para mí

Ver ejemplo en Fiddle

Esto funcionó para mí perfectamente.

Agregue esta clase navbar-fixed-bottom a su pie de página.

Lo usé así:

Y se ajusta al fondo en todo el ancho.

Editar: Esto establecerá que el pie de página esté siempre visible, es algo que debes tener en cuenta.

Necesita envolver su .container-fluid div para que su pie de página adhesivo funcione, también le faltan algunas propiedades en su clase .wrapper . Prueba esto:

Retire la padding-top:70px de la etiqueta de su body e .container-fluid en su .container-fluid en su lugar, así:

 .wrapper > .container-fluid { padding-top: 70px; } 

Tenemos que hacer esto porque presionar el body hacia abajo para acomodar la barra de navegación termina empujando el pie de página un poco más allá (70px más allá) de la ventana gráfica para obtener una barra de desplazamiento. Obtenemos mejores resultados al presionar el div .container-fluid lugar.

A continuación tenemos que eliminar la clase .wrapper fuera de su div .container-fluid y envolver su #main div con ella, así:

 
 
 
...
 
 
  

Por supuesto, tu pie de página debe estar fuera del div .wrapper así que quítalo del div. .Wrapper y colócalo afuera, así:

 
 .... 
  

Después de que todo haya terminado, .wrapper su pie de página de forma adecuada más cerca de su clase .wrapper utilizando un margen negativo, como .wrapper :

 .wrapper { min-height: 100%; height: auto !important; /* ie7 fix */ height: 100%; margin: 0 auto -43px; } 

Y eso debería funcionar, aunque probablemente tendrá que modificar algunas otras cosas para que funcione cuando se .wrapper el tamaño de la pantalla, como restablecer la altura en la clase .wrapper , así:

 @media (max-width:480px) { .wrapper { height:auto; } } 

Esta es la forma correcta de hacerlo con Twitter Bootstrap y la nueva clase de navegación fija de fondo: (no tienes idea de cuánto tiempo estuve buscando esto)

CSS:

 html { position: relative; min-height: 100%; } #content { padding-bottom: 50px; } #footer .navbar{ position: absolute; } 

HTML:

   
...
 
 
 
 
 
 
Menu 1
 
Menu 2
 
 
 
 
 
    

La respuesta de HenryW es buena, aunque necesitaba algunos ajustes para que funcionara como yo quería. En particular, lo siguiente también se maneja:

• Evitar el “salto” en la carga de la página marcando primero invisible y configurando visible en javascript
• Tratar con el navegador cambia el tamaño con gracia
• Además, establecer el pie de página de nuevo en la página si el navegador se hace más pequeño y el pie de página se vuelve más grande que la página
• Ajustes de la función de altura

Esto es lo que funcionó para mí con esos ajustes:

HTML:

 
My sweet footer 

CSS:

 #footer { padding-bottom: 30px; } 

JavaScript:

 function setFooterStyle() { var docHeight = $(window).height(); var footerHeight = $('#footer').outerHeight(); var footerTop = $('#footer').position().top + footerHeight; if (footerTop < docHeight) { $('#footer').css('margin-top', (docHeight - footerTop) + 'px'); } else { $('#footer').css('margin-top', ''); } $('#footer').removeClass('invisible'); } $(document).ready(function() { setFooterStyle(); window.onresize = setFooterStyle; }); 

En la última versión de bootstrap 4-alfa , pude hacerlo usando la clase .fixed-bottom .

Así es como lo uso con el pie de página:

Puede encontrar más información en la documentación de ubicación aquí .

Utilice el componente de la barra de navegación y agregue la clase .navbar-fixed-bottom:

agregar cuerpo

  { padding-bottom: 70px; } 

para manejar los diseños de restricciones de ancho use lo siguiente para que no obtenga esquinas redondeadas, y para que su barra de navegación quede al ras a los lados de la aplicación

 
 
 
 
YourApp v1.0.0
 
©2013 • CONFIDENTIAL ALL RIGHTS RESERVED
 
 
  

luego puede usar css para anular las clases de arranque para ajustar la altura, la fuente y el color

  .navbar-fixed-bottom { font-size: 12px; line-height: 18px; } .navbar-fixed-bottom .navbar-inner { min-height: 22px; } .navbar-fixed-bottom .p { margin: 2px 0 2px; } 

Puede usar jQuery para manejar esto:

 $(function() { /** * Read the size of the window and reposition the footer at the bottom. */ var stickyFooter = function(){ var pageHeight = $('html').height(); var windowHeight = $(window).height(); var footerHeight = $('footer').outerHeight(); // A footer with 'fixed-bottom' has the CSS attribute "position: absolute", // and thus is outside of its container and counted in $('html').height(). var totalHeight = $('footer').hasClass('fixed-bottom') ? pageHeight + footerHeight : pageHeight; // If the window is larger than the content, fix the footer at the bottom. if (windowHeight >= totalHeight) { return $('footer').addClass('fixed-bottom'); } else { // If the page content is larger than the window, the footer must move. return $('footer').removeClass('fixed-bottom'); } }; // Call when this script is first loaded. window.onload = stickyFooter; // Call again when the window is resized. $(window).resize(function() { stickyFooter(); }); }); 

La técnica más simple es probablemente usar Bootstrap navbar-static-bottom junto con establecer el div principal del contenedor con height: 100vh (nuevo porcentaje de puerto de vista CSS3). Esto vaciará el pie de página hacia abajo.

 
 some content 
  

Probado con Bootstrap 3.6.6 .

HTML

CSS

 .footer { bottom: 0; position: absolute; } 

 #wrap { min-height: 100%; height: auto !important; height: 100%; width: 100%; /*Negative indent footer by its height*/ margin: 0 auto -60px; position: fixed; left: 0; top: 0; } 

La altura del pie de página coincide con el tamaño de la sangría inferior del elemento de ajuste.

 .footer { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; } 

¡El único que funcionó para mí !:

 html { position: relative; min-height: 100%; padding-bottom:90px; } body { margin-bottom: 90px; } footer { position: absolute; bottom: 0; width: 100%; height: 90px; } 

Se ve como la height:100% ‘cadena’ se está rompiendo en div#main . Intente agregarle height:100% y eso lo acercará más a su objective.

Aquí encontrará el enfoque en HAML ( http://haml.info ) con barra de navegación en la parte superior y pie de página en la parte inferior de la página:

 %body #main{:role => "main"} %header.navbar.navbar-fixed-top %nav.navbar-inner .container /HEADER .container /BODY %footer.navbar.navbar-fixed-bottom .container .row /FOOTER 

Mantenlo simple.

 footer { bottom: 0; position: absolute; } 

Es posible que también deba compensar la altura del pie de página añadiendo un margin-bottom equivalente a la altura del pie de página en el body .

Aquí hay un ejemplo usando css3:

CSS:

 html, body { height: 100%; margin: 0; } #wrap { padding: 10px; min-height: -webkit-calc(100% - 100px); /* Chrome */ min-height: -moz-calc(100% - 100px); /* Firefox */ min-height: calc(100% - 100px); /* native */ } .footer { position: relative; clear:both; } 

HTML:

 
 
 body content.... 
 
  

violín

Así es como lo hace el bootstrap:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Solo usa la fuente de la página y deberías poder ver. No te olvides del

an the top.

otra posible solución, simplemente usando consultas de medios

 @media screen and (min-width:1px) and (max-width:767px) { .footer { } } /* no style for smaller or else it goes weird.*/ @media screen and (min-width:768px) and (max-width:991px) { .footer{ bottom: 0; width: 100%; position: absolute; } } @media screen and (min-width:992px) and (max-width:1199px) { .footer{ bottom: 0; width: 100%; position: absolute; } } @media screen and (min-width:1120px){ .footer{ bottom: 0; width: 100%; position: absolute; } } 

Use la clase de abajo para desplazarla a la última línea de la página y también para ubicarla en el centro de la misma. Si está utilizando la página HAML de ruby ​​on rails, puede utilizar el siguiente código. %footer.card.text-center

Por favor, no olvides usar Twitter bootstrapp