html - Bootstrap 4-Pie de página adhesivo-Altura dinámica del pie de página

css twitter-bootstrap

Question

Necesito poner un pie de página adhesivo en mis páginas, sin embargo, no tengo una altura definida para mi pie de página. En pantallas más pequeñas: las filas cambian de tamaño y el pie de página se alarga.

Por lo tanto, el ejemplo de pie de página adhesivo predeterminado proporcionado en getbootstrap no funciona, ya que requiere una altura de pie de página fija.

¿Alguna forma de implementar esto?

/* 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;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

Answer 1

Ahora que Bootstrap 4 es flexbox, se puede hacer un pie de página adhesivo usando ...

<wrapper class="d-flex flex-column">
    <nav>
    </nav>
    <main class="flex-fill">
    </main>
    <footer>
    </footer>
</wrapper>

body, wrapper {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}

Demostración: Bootstrap 4 Sticky Footer (4.0.0)

Nota: La clase de utilidad de flex-fill se incluirá en la próxima versión de Bootstrap 4.1 . Entonces, después de ese lanzamiento, no se necesitará el CSS adicional para el relleno flexible.

Answer 2

Este script agrega dinámicamente la clase de fixed-bottom si la altura de la página es menor que la altura de la ventana gráfica:

jQuery(function ($) {
  function fixedFooter(){
    var $footer = $(''.site-footer'');
    if(typeof $footer === ''undefined'') return 0;
      $footer.removeClass(''fixed-bottom'');
      if($(window).height() > $body.height()){
        $footer.addClass(''fixed-bottom'');
      }
    }

    // call `fixedFooter()` when page height changed (not by viewport resize)
    if(typeof window.lastPageHeight === ''undefined''){
      setInterval(function () {
        if(window.lastPageHeight !== $body.height()){
          fixedFooter();
        }
      }, 1000);
    }
    window.lastPageHeight = $body.height();
  }

  fixedFooter(); // first call

  // call `fixedFooter()` when viewport height changed
  window.addEventListener(''resize'', function(){
    fixedFooter();
  }, true);

});

Estilo para evitar la superposición con modales, barras laterales fijas, etc.

.site-footer.fixed-bottom {
  z-index: 1 !important;
}

Answer 3

Una manera muy simple es usar una barra de navegación como pie de página. Viene con una clase de fondo fijo que es realmente útil. Para cambiar su espacio, puede ver la documentación aquí ... https://getbootstrap.com/docs/4.2/utilities/spacing/

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

Answer 4

Use min-height lugar de height para que sea de altura variable.

https://codepen.io/hunzaboy/pen/prxgRb

También en pantallas más pequeñas simplemente elimine la posición absoluta y hágala estática.