Come si crea un piè di pagina non appiccicoso in Bootstrap?

Question

Come si produce un piè di pagina che si estende su tutta la larghezza dello schermo (nonostante la risoluzione dello schermo) e rimane nella parte inferiore della pagina?

Quando lo cerco, ottengo persone che forniscono codice per i piè di pagina appiccicosi (i piè di pagina che hanno l'aspirapolvere alla pagina) e dicono di usare il posizionamento assoluto (che sento è un no no).

Un esempio perfetto di ciò che intendo è quello dei siti che twitter bootstrap cita come esempio (https://www.gathercontent.com/). In quel sito il piè di pagina (che assomiglia a un'unità di eroi o qualcosa del genere) è sempre in fondo alla pagina.

Answer 1

Utilizzare questa jquery:

$(window).load(function() { 
    $('.footer').width($(window).width()); 
    $(window).resize(function() { 
     $('.footer').width($(window).width()); 
    }); 
}); 

Assicurarsi di avere un file js se

Answer 2

ero alla ricerca di qualcosa di simile, come non volevo il piè di pagina per librarsi. Il piè di pagina stava bloccando gli elementi del menu a discesa su piccoli dispositivi mobili. Tutto ciò che ho fatto è stato rimuovere "navbar-fixed-bottom" dalla classe footer.

ho cambiato

<div class = "footer navbar-fixed-bottom"></div> 

a

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

Answer 3

Se si utilizza bootstrap, questo esempio mostra come è possibile farlo. Il nome è fuorviante sul sito, ma rimane nella parte inferiore della pagina se non c'è molto contenuto. Si sposta anche in basso nella pagina se c'è molto contenuto (quindi non si attacca).

Il piè di pagina:

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/

Il CSS:

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/sticky-footer-navbar.css

Assicurarsi di non dimenticare il

html { 
position: relative; 
min-height: 100%; 
}