Piè di pagina fisso in Bootstrap

87

Sto provando Bootstrap e mi chiedevo, come posso aggiustare il piè di pagina in basso senza che scompaia dalla pagina se si scorre il contenuto?

— stdcerr
fonte

215

Per ottenere un piè di pagina che si attacca alla parte inferiore della visualizzazione, assegnagli una posizione fissa come questa:

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

Bootstrap include questo CSS nella sezione Navbar> Placement con la classe fixed-bottom. Basta aggiungere questa classe al tuo elemento piè di pagina:

<footer class="fixed-bottom">

Documenti Bootstrap: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

— Josh KG
fonte

Questo e il commento di @ Daniel-Tero lo hanno fatto per me.

— jmng

4

Se una pagina ha lo scorrimento, non funziona correttamente.

— Arnab

2

fixed-bottomnon ho fatto quello che mi aspettavo, ho fatto invece static-bottomdi rispettare l'altezza del contenuto della pagina.

— Gjaa,

85

Aggiungi questo:

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

https://stackoverflow.com/a/21604189

EDIT: la classe navbar-fixed-bottomè stata modificata a fixed-bottompartire da Bootstrap v4-alpha.6.

http://v4-alpha.getbootstrap.com/components/navbar/#placement

— Siddharth Chauhan
fonte

8

Aggiungi questo:

<div class="footer fixed-bottom">

— Matheus Gomes
fonte

3

Aggiungi z-index:-9999;a questo metodo o coprirà la barra in alto se lo hai 1.

— Daniel Tero
fonte

0

Puoi farlo avvolgendo il contenuto della pagina in un div con il seguente stile di id applicato:

<style>
#wrap {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}
</style>

<div id="wrap">
    <!-- Your page content here... -->
</div>

Ha funzionato per me.

— Signor Porcupine
fonte

-4

Potresti voler controllare quell'esempio: http://getbootstrap.com/2.3.2/examples/sticky-footer.html

— Vladimir Dimchev
fonte

2

Questo è per il piè di pagina appiccicoso, non per il piè di pagina fisso: /

— az_

@aaronz qual è la differenza?

— Arsen Ibragimov

4

@ArsenIbragimov Il piè di pagina appiccicoso viene spostato alla fine della pagina se il contenuto è più alto della visualizzazione. Il piè di pagina fisso è sempre visibile nella parte inferiore della visualizzazione.

— az_