Twitter Bootstrap 3 Pie de página adhesivo

204

¡He estado usando el marco de arranque de Twitter durante bastante tiempo y recientemente se actualizaron a la versión 3!

Tengo problemas para que el pie de página adhesivo se pegue en la parte inferior, he usado la plantilla de inicio suministrada por el sitio web de arranque de twitter, pero todavía no tengo suerte, ¿alguna idea?

html css twitter-bootstrap twitter-bootstrap-3 Brad Fletcher
fuente
31
ejemplo oficial: getbootstrap.com/examples/sticky-footer-navbar
ptim
3
@memeLab ¿por qué el ejemplo oficial no tiene nada sobre el margen inferior del cuerpo: -60px? ¿O lo extrañé ...?
reúne
Se agregó una solución única de CSS que permite una altura variable para el pie de página adhesivo. Lo vinculé aquí ya que, como nueva respuesta, está en la parte inferior de la página.
tao

Respuestas:

194

simplemente agregue la clase navbar-fixed-bottom a su pie de página.

<div class="footer navbar-fixed-bottom">
Jon
fuente
32
esto no es lo mismo que el pie de página adhesivo
Yura Omelchuk
3
Si tiene encabezado y pie de página, pierde demasiado espacio en un dispositivo móvil.
strattonn
44
@strattonn para eso están las consultas de los medios
Jacob Raccuia
20
Esto funciona perfectamente si la página no necesita un desplazamiento. Pero el pie de página se superpone con más contenido en la página. ¿Alguna solución al respecto? ¡Gracias!
Xplora
1
no estoy seguro sobre el problema de superposición, pero ¿agregar margen / relleno no resuelve el problema?
Jon
152

Refiriéndose al ejemplo oficial de pie de página adhesivo Boostrap3, no hay necesidad de agregar <div id="push"></div>, y el CSS es más simple.

El CSS utilizado en el ejemplo oficial es:

/* 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;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}

y el HTML esencial:

<body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">

      </div>
    </div>

    <div id="footer">
      <div class="container">

      </div>
    </div>
</body>

Puede encontrar el enlace para este CSS en el código fuente del ejemplo de pie de página adhesivo .

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

URL completa: http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

tkymtk
fuente
21
El HTML y CSS en el ejemplo oficial de pie de página ahora es bastante diferente de lo que se describe aquí, por ejemplo, ya no se usa el div 'wrap'.
IanB
52

Aquí hay un método que agregará un pie de página adhesivo que no requiere ningún CSS o Javascript adicional aparte de lo que ya está en Bootstrap y no interferirá con su pie de página actual.

Ejemplo aquí: Easy Footy Footer

Simplemente copie y pegue esto directamente en su código. Sin alboroto no muss.

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>
anataliocs
fuente
44
Muy agradable y rapido. Puede ser sensible también. Pero es necesario agregar espacio adicional en la parte inferior del contenido de la página para que el pie de página no lo oculte. El espacio debe tener la altura igual a la altura del pie de página. ¿Puedes mostrar cómo hacer eso mejor? Por cierto "no requiere ningún CSS" es técnicamente incorrecto. Debería ser "no requiere ningún CSS adicional aparte de las clases Bootstrap" .
ADTC
1
Me encanta que esto aproveche lo que existe en bootstrap. No pude obtener las otras respuestas principales para trabajar, pero pegando esto en mi página y bam, pie de página adhesivo. ¡Gracias!
haakon.io
34

Además del CSS que acaba de agregar, recuerde que debe agregar el div de inserción antes de cerrar el div de ajuste

La estructura básica para el HTML es 

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

Vista en vivo Vista de
edición

David Taiaroa
fuente
Si el contenido de la página es mayor que la visualización disponible, el pie de página se desplazará hacia abajo. Me gustaría que el pie de página se pegue realmente al fondo (como navbar-fixed-bottom)
blueFast
Hola @delavnog, ¿funcionaría algo como esto para ti? codepen.io/panchroma/pen/wMXWpY . Los únicos bits importantes para usted son el HTML en la línea 647 y el CSS
David Taiaroa
@delavnog, la misma idea con contenido mínimo en la página codepen.io/panchroma/pen/JGZKqy
David Taiaroa
Gracias, eso es genial! Ahora, si pudiera obtener el div principal centrado verticalmente entre el navegador y el pie de página, ¡sería increíble! Editó su codepen: codepen.io/anon/pen/rxKMaW (tuve que agregar un margen al cuerpo, porque la navegación está consumiendo la parte superior del contenido)
blueFast
@delavnog, aquí hay un comienzo si el cuerpo principal no está demasiado alto. Sin embargo, se necesitaría más trabajo para un contenido más largo: codepen.io/panchroma/pen/vLrXMq
David Taiaroa
30

Aquí está el código simplificado de Sticky Footer a partir de hoy porque siempre lo están optimizando y esto es BUENO:

HTML

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
Leniel Maccaferri
fuente
1
Solución perfecta. Eso es lo que estaba buscando.
Levimatt
1
Lamentablemente, este pie de página tiene un tamaño fijo. A veces, cuando el pie de página es dinámico, puede ser mayor o menor que su altura en CSS.
23W
27

Llegué un poco tarde al tema, pero me encontré con esta publicación, ya que esa pregunta me mordió y finalmente encontré una manera realmente fácil de superarlo, simplemente use a navbarcon la navbar-fixed-bottomclase habilitada. Por ejemplo:

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

HTH

iMil
fuente
Me gusta la simplicidad y la eficacia de su respuesta, que por cierto es una respuesta inteligente. Muchas respuestas al mismo problema están llenas de jquery y cosas complicadas. Gracias hombre.
digitai
1
Es la mitad de la solución, aún debe ocuparse de las superposiciones del contenido de su página si cambia el tamaño.
Baldráni
@ Baldráni No, es una solución completa, las superposiciones funcionan bien si usa la fila Bootstrap y la columna en el html de pie de página (que es lo que debe hacer de todos modos)
Tino Mclaren
Este no es un pie de página adhesivo. Es una barra de navegación inferior fija que solo es adecuada para el contenido de la barra de navegación y se superpone al contenido de la página.
Zim
10

Aquí está mi solución actualizada para este problema. 

 /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}


body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;

  border-top: 1px solid #eee;
  text-align: center;
}

.site-footer-links {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  padding-top: 20px;
  display: block;
  text-align: center;
  float: center;
  margin: 0;
  list-style: none;
}

Y úsalo así: 

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

O 

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
zee
fuente
44
Esta no es una buena solución porque su pie de página es fijo, lo que significa que se superpone al contenido de la página (si corresponde). Intente agregar algunas some text<br>líneas antes del pie de página y reduzca el tamaño de la ventana.
jmarceli
@ user2041318: sí, eso es horrible ... gracias por señalar esto.
Sebastian
Esto se ha corregido según el comentario de jmarceli. El pie de página ya no es fijo.
zee
3

El ejemplo pegajoso no funciona para mí. Mi solución:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
Andi Giga
fuente
Simple, buen CSS antiguo. Trabajo hecho. Me resulta divertido lo complicadas que son algunas de las respuestas mejor calificadas. ¿No se supone que Bootstrap nos facilitará la vida? 😂
Kal
2

El empuje divdebe ir justo después del wrap, NO dentro ... así como así 

<div id="wrap">
  *content goes here*
</div>

<div id="push">
</div>

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>
Joseph
fuente
2

Respondido por el OP:

Agregue esto a su archivo CSS.

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 -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 60px;
}
#footer {
  background-color: #eee;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
CodeCaster
fuente
2

Quería un pie de página flexible y flexible , por eso vine aquí. Las mejores respuestas me llevaron en la dirección correcta.

El actual (2 oct 16) Bootstrap 3 css Sticky footer (tamaño fijo) se ve así:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

Siempre que el pie de página tenga un tamaño fijo, el margen inferior del cuerpo crea un empuje para permitir un bolsillo para el pie de página. En este caso, ambos están configurados en 60px. Pero si el pie de página no es fijo y supera los 60 píxeles de altura, cubrirá el contenido de su página.

Hacer flexible: elimine el margen del cuerpo CSS y la altura del pie de página. Luego agregue JavaScript para obtener la altura del pie de página y establecer el margen del cuerpoBottom. Eso se hace con la función setfooter (). A continuación, agregue escuchas de eventos para cuando la página se carga por primera vez y al cambiar el tamaño que ejecuta el setfooter. Nota: Si su pie de página tiene un acordeón o cualquier otra cosa que active un cambio de tamaño, sin cambiar el tamaño de la ventana, debe llamar a la función setfooter () nuevamente.

Ejecute el fragmento y luego pantalla completa para demostrarlo.

function setfooter(){
	var ht = document.getElementById("footer").scrollHeight;
	document.body.style.marginBottom = ht + "px";
}

window.addEventListener('resize', function(){
		setfooter();
	}, true);
window.addEventListener('load', function(){
	setfooter();
}, true);
html {
  position: relative;
  min-height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  
  /* additional style for effect only */
   text-align: center;
    background-color: #333;
    color: #fff;
}
  


body{
/* additional style for effect only not needed in bootstrap*/
  padding:0;
  margin: 0;
  }
<div>
  Page content
  <br>  <br>
  line 3
  <br>  <br>
  line 5
  <br>  <br>
  line 7
  
 </div>


<footer id="footer" class="footer">
      <div class="container">
        <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
      </div>
    </footer>
Expandir fragmento

Sterner
fuente
2

Esto ha sido resuelto por flexbox, una vez y para siempre:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

El HTML

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

El CSS

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
Konstantin Schubert
fuente
2

Js simple

if ($(document).height() <= $(window).height()) {
    $("footer").addClass("navbar-fixed-bottom");
}

Actualización n. ° 1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
fdrv
fuente
1

Para resumir todo esto, solo tenga en cuenta una cosa que todo, excepto el pie de página, debería tener min-height: 100%o poco menos.

kshirish
fuente
1

Escribo mi código de pie de página adhesivo simplificado con relleno usando MENOS. Es probable que esta respuesta esté fuera de tema porque la pregunta no habla sobre el relleno, por lo que si está interesado, consulte esta publicación para obtener más detalles.

@footer-padding:      40px;  // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)

/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;

html {
 position: relative;
 min-height: 100%;
}
body {
 /* This avoids footer to overlap the page content */
 margin-bottom: @footer-height;
}
footer{
 /* Fix the footer on bottom and give it fixed height */
 position: absolute;
 bottom: 0;
 width: 100%;
 height: @footer-height;
 padding: @footer-padding 0;
}
Fred K
fuente
1

Basado en la respuesta de Jek-fdrv , agregué una .on('resize', function()para asegurarme de que funciona en todos los dispositivos y todas las resoluciones:

$(window).on('resize', function() {
    if ($(document).height() <= $(window).height()) {
        $('footer').addClass("navbar-fixed-bottom");
    } else {
        $('footer').removeClass("navbar-fixed-bottom");
    }
});
iamchriswick
fuente
1

La versión actual de bootstrap ya no parece funcionar para esta función. Si descarga su ejemplo de barra de navegación de pie de página adhesivo y coloca una gran cantidad de contenido en el área del cuerpo principal, el pie de página se desplazará hacia abajo, pasando la parte inferior de la ventana gráfica. No es pegajoso en absoluto.

CJ Catalano
fuente
1

Aquí hay una solución basada en CSS para un pie de página adhesivo de altura variable totalmente receptivo.
Ventaja: el pie de página permite una altura variable, ya que la altura ya no necesita ser codificada en CSS.

Mostrar fragmento de código

Y aquí está el sin prefijo SCSS(para gulp/ grunt):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
tao
fuente
1

¡Solo usa flex! Asegúrese de usar body y main en su HTML y es una de las mejores soluciones (a menos que necesite soporte para IE9). No requiere una altura fija o similar.

¡Eso también se recomienda para Materialise!

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}
kentor
fuente
0

en palabras Haml & Sass todo lo que es necesario:

Haml para app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

Sass para app/assets/stylesheets/application.css.sass

$footer-height: 110px

html
  position: relative
  min-height: 100%

body
  margin-bottom: $footer-height

body > footer
  position: absolute
  bottom: 0
  width: 100%
  height: $footer-height

basado en http://getbootstrap.com/examples/sticky-footer-navbar/

equivalente8
fuente
0

Si desea utilizar bootstrap build en clases para el pie de página. También deberías escribir algunos javascript:

$(document).ready(function(){
  $.fn.resize_footer();

  $(window).resize(function() {
    $.fn.resize_footer();
  });
 });

(function($) {

  $.fn.resize_footer = function(){
    $('body > .container-fluid').css('padding-bottom', $('body > footer').height());
  };
 });

Evitará la superposición de contenido por el pie de página fijo, y ajustará el padding-bottom cuando el usuario cambie el tamaño de la ventana / pantalla.

En el script anterior supuse que el pie de página se coloca directamente dentro de la etiqueta del cuerpo de esa manera:

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

Definitivamente, esta no es la mejor solución (debido al JS que podría evitarse), pero funciona sin problemas de superposición, es fácil de implementar y responde ( heightno está codificado en CSS).

jmarceli
fuente
0 

#myfooter{
height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
<footer>
    <div class="footer">
        <div class="container-fluid"  id="myfooter">
            <div class="row">
                <div class="col-md-12">
                    <p class="copy">Copyright &copy; Your words</p>
                </div>
            </div>
        </div>
    </div>
</footer>
Expandir fragmento

Gpak
fuente
¿Cómo es esto pegajoso en la parte inferior?
Sebastian
0

Aquí hay un pie de página adhesivo muy simple y limpio que puede usar en bootstrap. Totalmente receptivo!

HTML

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

Ejemplo: demostración de CodePen

Gothburz
fuente
¡Esta solución desplazará la barra de pie de página hacia la derecha al abrir el modo de arranque debido al posicionamiento absoluto!
thethakuri
0

Usar flexboxes la forma más fácil que he encontrado, de los tipos de trucos CSS . Este es un verdadero pie de página, funciona cuando el contenido es <100% de la página y> 100% de la página:

<body>
  <div class="content">
  content
</div>
<footer></footer>
</body>

Y CSS:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

Tenga en cuenta que esto es independiente de bootstrap, por lo que funciona con bootstrap y sin él.

bustawin
fuente
0

Simplemente puede intentar agregar una clase en la barra de navegación del pie de página:

navbar-fixed-bottom

Luego cree un CSS llamado custom.css y relleno de cuerpo como este ...

body { padding-bottom: 70px; }
Ikram - Ud - Daula
fuente