Bootstrap 3 Porta il piè di pagina verso il basso. non riparato


177

Sto usando Bootstrap 3 per un sito che sto progettando.

Voglio avere un piè di pagina come questo esempio. Campione

Si prega di notare che non lo voglio FISSO, quindi bootstrap navbar-fixed-bottom non risolve il mio problema. Voglio solo che sia sempre in fondo al contenuto e che sia anche reattivo.

Qualsiasi guida sarà molto apprezzata.


MODIFICARE:

Scusa se non sono stato chiaro. Quello che succede ora è che quando il corpo del contenuto non ha abbastanza contenuto. Il mio piè di pagina si alza e poi lascia uno spazio vuoto in fondo.

Questo è quello che ho ora per la mia barra di navigazione

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}

Hai un codice di esempio su cui hai lavorato che ti sta causando un problema?
badAdvice Acquista

Sembra un piè di pagina normale, se non vuoi Risolto, puoi aggiornare lo stile. Quale problema stai riscontrando?
Mutante

Quando è l'ultima cosa nel tuo HTML, sarà sempre in fondo. Domanda confusa che richiede un esempio di codice per capire qual è il problema.
Joe Conlin,


@davidpauljunior: quelli sono piè di pagina appiccicosi che non è quello che sto cercando
user3169403

Risposte:


124

Vedi l'esempio sotto. Ciò posizionerà il piè di pagina in modo che rimanga in fondo se la pagina ha meno contenuti e si comporti come un normale piè di pagina se la pagina ha più contenuti.

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

AGGIORNAMENTO : la nuova versione di Bootstrap mostra come aggiungere il piè di pagina appiccicoso senza aggiungere un wrapper. Per ulteriori dettagli, consultare la risposta di Jboy Flaga.


I tuoi collegamenti sono interrotti
Halter,

2
Perché ci sono due definizioni delle proprietà di altezza nel wrapper?
HardlyNoticeable

@HardlyNoticeable è una larghezza minima per forzare il wrapper anche se il contenuto è inferiore.
Surjith SM,

Mi chiedo ancora perché ci sono due definizioni delle proprietà di altezza. Non hai risposto a @SurjithSM
Erowlin il

@Erowlin Questo è un errore. non hai bisogno di due proprietà di altezza. Sarà sufficiente solo l'altezza minima, modificata la risposta.
Surjith SM

316

C'è una soluzione semplificata da bootstrap qui (dove non è necessario creare una nuova classe): http://getbootstrap.com/examples/sticky-footer-navbar/

Quando apri quella pagina, fai clic destro su un browser e "Visualizza sorgente" e apri il file sticky-footer-navbar.css ( http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar. css )

puoi vedere che hai solo bisogno di questo 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;
}

per questo HTML

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>

19
Questa (dai documenti / esempi Bootstrap) dovrebbe essere la risposta accettata.
richardm,

5
Per me questo non funziona perché il mio piè di pagina è piuttosto alto. È fantastico se vuoi solo un paragrafo ma il mio ha diverse colonne - usando questo metodo,
finisco

9
Questa soluzione footer appiccicosa Bootstraps non è? Non credo che l'OP intendesse questo. Per me, con una lunga pagina il mio piè di pagina è apparso nella parte inferiore dello schermo ma non nella parte inferiore del contenuto (cioè sopra il contenuto). Ho dovuto cambiare posizione: assoluto; al relativo (nella classe .footer) affinché funzioni.
Tino Mclaren,

24
Questa sarebbe la risposta corretta se questo titolo non avesse "non risolto" nel titolo ...
Ruudy,

1
questo funziona solo per piè di pagina con dimensioni fisse, preferisco la soluzione di Philip Walton proposta da @ChristopherTan che è super sottile e indipendente dall'altezza del piè di pagina
buergi

16

usa la flexbox come puoi usarla a tua disposizione. La soluzione offerta da bootstrap 4 continua a cercare i contenuti sovrapposti in un layout reattivo, ad esempio: si romperà nella visualizzazione mobile, mi imbatto nel trucco più pulito è usare la demo della soluzione flexbox mostrata qui :( https://philipwalton.github.io / risolto da flexbox / demo / sticky-footer / ) in questo modo non abbiamo a che fare con problemi di altezza fissa che sono ormai una soluzione obsoleta ... questa soluzione funziona per bootstrap 3 e 4 a seconda di quale si sta utilizzando.

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

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

.Site-content {
  flex: 1;
}

1
Questa è una soluzione molto intelligente. Penso che i CSS abbiano troppo da offrire e che non sappiamo nemmeno come trarne il massimo.
Gilbert,

2
Adoro questa soluzione. Sorprendente.
Bagus Aji Santoso,

14

AGGIORNAMENTO: Questo non risponde direttamente alla domanda nella sua interezza, ma altri potrebbero trovarlo utile.

Questo è l'HTML per il tuo piè di pagina reattivo

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

Per il CSS

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

NOTA: Al momento della pubblicazione di questa domanda, le righe di codice sopra riportate non spingono il piè di pagina sotto il contenuto della pagina; ma impedirà al tuo piè di pagina di strisciare a metà della pagina quando c'è poco contenuto nella pagina. Per un esempio che spinge il piè di pagina sotto il contenuto della pagina, dai un'occhiata qui http://getbootstrap.com/examples/sticky-footer/


Questa è in realtà una cattiva soluzione, poiché il piè di pagina copre il contenuto principale quando si incontrano. Devi impostare il padding-bottomcontenitore del contenuto principale uguale all'altezza del piè di pagina. E devi farlo dinamicamente su pagina loaded resizeeventi e anche a piè di pagina DOMSubtreeModified.
Tao,

9

Per le persone che ancora lottano e la soluzione con risposta non funziona come desideri, ecco la soluzione più semplice che ho trovato.

Avvolgi il contenuto principale e assegnagli un'altezza minima di visualizzazione. Regola il 60 a qualunque valore il tuo stile abbia bisogno.

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

Questo è tutto e funziona abbastanza bene.


Ho avuto lo stesso problema di quello in questione. Dopo aver provato quasi tutte le risposte di alto livello qui, questo è stato l'unico che ha funzionato per me. E ha funzionato in tutte le dimensioni. L'unica modifica che ho apportato è stata "altezza minima: 70vh". Ciò dipenderà dalle dimensioni dell'intestazione e del piè di pagina del tuo sito.
Arfath,

Questo dovrebbe essere più alto, funziona esattamente come richiesto.
yam

Questo ha funzionato per le mie esigenze. Modifica il valore dell'altezza minima fino a ottenere il risultato desiderato.
sawyerrken,

Meravigliosa, questa è la soluzione più semplice ed efficiente al problema del posizionamento del piè di pagina!
Prahlad Yeri,

5

Galen Gidman ha pubblicato un'ottima soluzione al problema di un piè di pagina reattivo che non ha un'altezza fissa. Puoi trovare la sua soluzione completa sul suo blog: http://galengidman.com/2014/03/25/responsive-fLEX-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }

Questo sembra essere compatibile con bootstrap, e quindi dovrebbe essere la risposta accettata, imho. Non è perfetto, poiché sembra apparire una barra di scorrimento orizzontale.
Florian Mertens,

Florian: nessuna barra di scorrimento orizzontale per me.
HardlyNoticeable

4

Per una soluzione CSS pura, scorrere dopo il 2 ° <hr>. La prima è la risposta iniziale (restituita nel 2016)


Il principale difetto delle soluzioni sopra è che hanno un'altezza fissa per il piè di pagina.
E questo non lo taglia nel mondo reale, dove le persone usano un numero di miliardi di dispositivi e hanno questa cattiva abitudine di ruotarli quando meno te lo aspetti e ** Poof! ** ecco il contenuto della tua pagina dietro il piè di pagina!

Nel mondo reale, è necessaria una funzione che calcola l'altezza del piè di pagina e regola dinamicamente il contenuto della pagina padding-bottomper adattarla all'altezza. E devi eseguire questa minuscola funzione sulla pagina loade sugli resizeeventi, nonché sul piè di pagina DOMSubtreeModified(nel caso in cui il tuo piè di pagina venga aggiornato in modo asincrono in modo dinamico o contenga elementi animati che cambiano dimensione quando interagiscono con).

Ecco una dimostrazione di concetto, usando jQuery v3.0.0e Bootstrap v4-alpha, ma non c'è motivo per cui non dovrebbe funzionare su versioni inferiori di ciascuno.

Inizialmente, ho pubblicato questa soluzione qui ma mi sono reso conto che potrebbe aiutare più persone se pubblicato sotto questa domanda.

Nota: ho volutamente avvolto il $([selector]).accomodateFooter()come un plugin jQuery, in modo che possa essere eseguito su qualsiasi elemento DOM, come nella maggior parte dei layout non è la $('body')'s bottom-paddingche le esigenze di regolazione, ma qualche pagina involucro elemento con position:relative(di solito il padre immediato del footer) .


Modifica successiva (3+ anni dopo la risposta iniziale):

A questo punto non considero più accettabile l'utilizzo di JavaScript per posizionare un piè di pagina di contenuto dinamico nella parte inferiore della pagina. Può essere realizzato solo con CSS, utilizzando flexbox, velocissimo, cross-browser.

Ecco qui:


3

Questo metodo utilizza un markup minimo. Metti tutti i tuoi contenuti in un .wrapper che ha un fondo imbottito e un margine inferiore inferiore pari all'altezza del piè di pagina (nel mio esempio 100px).

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>

2

O questo

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>

1

Per Bootstrap:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>

2
La domanda afferma specificamente che navbar-fixed-bottomNON è ciò che risolve il problema.
p4sh4,

1

Nessuna di queste soluzioni ha funzionato perfettamente per me perché ho usato la classe inversa della barra di navigazione nel mio piè di pagina. Ma ho ottenuto una soluzione che ha funzionato e senza Javascript. Chrome utilizzato per aiutare a formare query multimediali. L'altezza del piè di pagina cambia man mano che lo schermo viene ridimensionato, quindi è necessario prestare attenzione a questo e regolare di conseguenza. Il contenuto del piè di pagina (ho impostato id = "footer" per definire il mio contenuto) dovrebbe usare postion = absolute e bottom = 0 per mantenerlo in fondo. Anche larghezza: 100%. Ecco il mio CSS con query multimediali. Dovrai regolare la larghezza minima e la larghezza massima e aggiungere o rimuovere alcuni elementi:

#footer {
  position: absolute;
  color:  #ffffff;
  width: 100%;
  bottom: 0; 
}
@media only screen and (min-width:1px) and (max-width: 407px)  {
    body {
        margin-bottom: 275px;
    }

    #footer {
        height: 270px; 
    }
}
@media only screen and (min-width:408px) and (max-width: 768px)  {
    body {
        margin-bottom: 245px;
    }

    #footer {
        height: 240px; 
    }
}
@media only screen and (min-width:769px)   {
    body {
        margin-bottom: 125px;
    }

    #footer {
        height: 120px; 
    }
}

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.