Your content here
En general, estoy familiarizado con la técnica de enjuagar un pie de página usando CSS y este siguiente enfoque .
Pero estoy teniendo algunos problemas para lograr que este enfoque funcione para Twitter bootstrap, muy probablemente debido al hecho de que Twitter bootstrap es receptivo por naturaleza. Utilizando Twitter bootstrap no puedo hacer que el pie de página se coloque en la parte inferior de la página usando el enfoque descrito en la publicación del blog anterior.
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
#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.
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
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:
...
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:
Esto es lo que funcionó para mí con esos ajustes:
HTML:
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
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