Twitter Bootstrap 3 Sticky Footer

204

Uso il framework bootstrap di Twitter da un po 'di tempo e recentemente sono stati aggiornati alla versione 3!

Ho problemi a far aderire il piè di pagina appiccicoso, ho usato il modello di avvio fornito dal sito Web Twitter Bootstrap, ma ancora nessuna fortuna, qualche idea?

html  css  twitter-bootstrap  twitter-bootstrap-3 
— Brad Fletcher
fonte
31
— ptim
3
@memeLab perché l'esempio ufficiale non ha nulla sul margine inferiore del corpo: -60px? O mi è mancato ...?
— Ganders,
Aggiunta una soluzione solo CSS che consente un'altezza variabile per il piè di pagina appiccicoso. Collegato qui come, essendo una nuova risposta, è in fondo alla pagina.
— Tao,

Risposte:

194

aggiungi la classe navbar-fixed-bottom al tuo piè di pagina.

<div class="footer navbar-fixed-bottom">
— Jon
fonte
32
questo non è lo stesso del footer appiccicoso
— Yura Omelchuk,
3
Se hai intestazione e piè di pagina, perdi troppo spazio su un dispositivo mobile.
— Strattonn,
4
@strattonn è a questo che servono le media query
— Jacob Raccuia,
20
Funziona perfettamente se la pagina non necessita di scorrimento. Ma il piè di pagina si sovrappone con più contenuti sulla pagina. Qualche soluzione al riguardo? Grazie!
— Xplora,
1
non sei sicuro del problema di sovrapposizione, ma l'aggiunta di margine / riempimento non risolve il problema?
— Jon,
152

Facendo riferimento all'esempio ufficiale di piè di pagina appiccicoso di Boostrap3, non è necessario aggiungerlo <div id="push"></div>e il CSS è più semplice.

Il CSS utilizzato nell'esempio ufficiale è:

/* 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;
}

e l'HTML essenziale:

<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>

Puoi trovare il link per questo css nel codice sorgente dell'esempio sticky footer .

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

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

— tkymtk
fonte
21
L'HTML e CSS nell'esempio ufficiale di piè di pagina è ora abbastanza diverso da quello che è descritto qui, ad es. Nessun div 'wrap' usato più.
— IanB
52

Ecco un metodo che aggiungerà un piè di pagina appiccicoso che non richiede alcun CSS o Javascript aggiuntivo diverso da quello che è già in Bootstrap e non interferirà con il piè di pagina corrente.

Esempio qui: Easy Sticky Footer

Copia e incolla questo direttamente nel tuo codice. Nessuna confusione, nessuna confusione.

<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
fonte
4
Molto gentile e veloce. Può anche essere reattivo. Ma è necessario aggiungere ulteriore spazio nella parte inferiore del contenuto della pagina in modo che non sia nascosto dal piè di pagina. Lo spazio dovrebbe avere un'altezza uguale all'altezza del piè di pagina. Puoi mostrare come farlo al meglio? BTW "non richiede alcun CSS" è tecnicamente sbagliato. Dovrebbe essere "non richiede alcun CSS aggiuntivo oltre alle classi Bootstrap" .
— ADTC,
1
Adoro che questo sfrutti ciò che esiste nel bootstrap. Non sono riuscito a far funzionare le altre risposte migliori, ma incollando questo nella mia pagina e bam, piè di pagina appiccicoso. Grazie!
— haakon.io,
34

Oltre al CSS appena aggiunto, ricorda che è necessario aggiungere il div push prima di chiudere il div avvolgente

La struttura di base per l'HTML è 

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

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

Vista live
Modifica vista

— David Taiaroa
fonte
Se il contenuto della pagina è più grande della visualizzazione disponibile, il piè di pagina verrà spostato verso il basso. Vorrei che il piè di pagina fosse davvero bloccato sul fondo (come navbar-fixed-bottom)
— blueFast
hey @delavnog, qualcosa del genere funzionerebbe per te? codepen.io/panchroma/pen/wMXWpY . Gli unici bit importanti per te sono l'HTML alla riga 647 e il CSS
— David Taiaroa,
@delavnog, stessa idea con contenuto minimo nella pagina codepen.io/panchroma/pen/JGZKqy
— David Taiaroa
Grazie, fantastico! Ora, se potessi avere il div principale centrato verticalmente tra nav e footer, sarebbe fantastico! Ho modificato il tuo codice: codepen.io/anon/pen/rxKMaW (ho dovuto aggiungere un margine al corpo, perché il nav sta divorando la parte superiore del contenuto)
— blueFast
@delavnog, ecco un inizio se il corpo principale non è troppo alto. Ci vorrebbe più lavoro per contenuti più lunghi: codepen.io/panchroma/pen/vLrXMq
— David Taiaroa,
30

Ecco il codice semplificato di Sticky Footer fino ad oggi perché lo ottimizzano sempre e questo è BUONO:

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
fonte
1
Soluzione perfetta Questo è quello che stavo cercando.
— Levimatt,
1
Purtroppo questo footer ha dimensioni fisse. A volte, quando il piè di pagina è dinamico, può essere più grande o più piccolo della sua altezza in css.
— 23W
27

Sono un po 'in ritardo sull'argomento, ma mi sono imbattuto in questo post perché sono appena stato morso da quella domanda e finalmente ho trovato un modo davvero semplice per superarlo, basta usare un navbarcon la navbar-fixed-bottomclasse abilitata. Per esempio:

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

HTH

— Imil
fonte
Mi piace la semplicità e l'efficacia della tua risposta, che tra l'altro è una risposta intelligente. Molte risposte allo stesso problema sono piene di jquery e cose complicate. Grazie uomo.
— digitai,
1
È una mezza soluzione, devi comunque occuparti delle sovrapposizioni del contenuto della tua pagina se lo ridimensioni.
— Baldráni,
@ Baldráni No, è una soluzione completa, le sovrapposizioni funzionano bene se usi la riga Bootstrap e il col nel piè di pagina html (che è quello che dovresti comunque fare)
— Tino Mclaren
Questo non è un piè di pagina appiccicoso. È una barra di navigazione inferiore fissa adatta solo per il contenuto della barra di navigazione e si sovrappone al contenuto della pagina.
— Zim,
10

Ecco la mia soluzione aggiornata a questo 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;
}

E usalo in questo modo: 

<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;
}
— zeta
fonte
4
Questa non è una buona soluzione perché il piè di pagina è fisso, il che significa che si sovrappone al contenuto della pagina (se presente). Prova ad aggiungere alcune some text<br>righe prima del piè di pagina e ridimensiona la finestra.
— jmarceli,
@utente2041318: sì, è orribile ... grazie per averlo segnalato.
— Sebastian,
Questo è stato corretto secondo il commento di jmarceli. Il piè di pagina non è più corretto.
— Zee,
3

L'esempio appiccicoso non funziona per me. La mia soluzione:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
— Andi Giga
fonte
CSS semplice e di buona qualità. Lavoro fatto. Trovo divertente quanto siano contorte alcune delle risposte più votate. Bootstrap non dovrebbe semplificarci la vita? 😂
— Kal
2

La spinta divdovrebbe andare subito dopo wrap, NON entro ... proprio così 

<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>
— Giuseppe
fonte
2

Risposta dell'OP:

Aggiungi questo al tuo file 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
fonte
2

Volevo un piè di pagina flessibile ed è per questo che sono venuto qui. Le risposte migliori mi hanno portato nella giusta direzione.

L'attuale (2 ott 16) Bootstrap 3 css Sticky footer (dimensione fissa) è simile al seguente:

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

Finché il piè di pagina ha una dimensione fissa, il margine inferiore del corpo crea una spinta per consentire una tasca per il piè di pagina. In questo caso, entrambi sono impostati su 60 px. Ma se il piè di pagina non è fisso e supera i 60px di altezza, coprirà il contenuto della tua pagina.

Rendi flessibile: elimina il margine del corpo CSS e l'altezza del piè di pagina. Quindi aggiungi JavaScript per ottenere l'altezza del piè di pagina e impostare il margine del corpo inferiore. Questo viene fatto con la funzione setfooter (). Successivamente aggiungi listener di eventi per quando la pagina viene caricata per la prima volta e al ridimensionamento che esegue il setfooter. Nota: se il piè di pagina ha una fisarmonica o qualsiasi altra cosa che innesca un cambio di dimensione, senza un ridimensionamento della finestra, è necessario chiamare nuovamente la funzione setfooter ().

Esegui lo snippet e quindi a schermo intero per dimostrarlo.

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>
Espandi frammento

— Sterner
fonte
2

Semplice js

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

Aggiornamento n. 1

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

Per riassumere tutto ciò, tieni a mente solo una cosa che tutto tranne il piè di pagina dovrebbe avere min-height: 100%o poco meno.

— kshirish
fonte
1

Scrivo il mio codice piè di pagina appiccicoso semplificato con imbottitura usando LESS. Questa risposta è probabilmente fuori tema perché la domanda non parla di imbottitura, quindi se sei interessato controlla questo post per maggiori dettagli.

@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
fonte
1

Sulla base della risposta di Jek-fdrv , ho aggiunto un .on('resize', function()per assicurarsi che funzioni su ogni dispositivo e risoluzione:

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

La versione corrente di bootstrap non sembra funzionare più per questa funzione. Se scarichi il loro esempio sticky-footer-navbar e inserisci una grande quantità di contenuti nell'area del corpo principale, il piè di pagina verrà spostato verso il basso oltre la parte inferiore della finestra. Non è affatto appiccicoso.

— CJ Catalano
fonte
1

Ecco una soluzione basata su CSS per un piè appiccicoso ad altezza variabile completamente reattivo.
Vantaggio: il piè di pagina consente un'altezza variabile, poiché l'altezza non deve più essere codificata nel CSS.

Mostra snippet di codice

Ed ecco il non prefisso SCSS(per gulp/ grunt):

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

Usa solo flex! Assicurati di usare body e main nel tuo HTML ed è una delle migliori soluzioni (a meno che tu non abbia bisogno del supporto IE9). Non richiede un'altezza fissa o simile.

Questo è consigliato anche per Materialise!

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

main {
    flex: 1 0 auto;
}
— Kentor
fonte
0

in parole Haml & Sass tutto ciò che è necessario:

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

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

Sass per 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

basato su http://getbootstrap.com/examples/sticky-footer-navbar/

— equivalent8
fonte
0

Se vuoi usare bootstrap build nelle classi per il piè di pagina. Dovresti anche scrivere un po 'di 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());
  };
 });

Impedirà la sovrapposizione dei contenuti dal piè di pagina fisso e regolerà il padding-bottommomento in cui l'utente modifica le dimensioni della finestra / schermo.

Nello script sopra ho ipotizzato che il piè di pagina sia posizionato direttamente all'interno del tag body in questo modo:

<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>

Questa non è sicuramente la soluzione migliore (a causa del JS che potrebbe essere evitato), ma funziona senza problemi di sovrapposizione, è facile da implementare e reattivo ( heightnon è codificato in CSS).

— jmarceli
fonte
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>
Espandi frammento

— Gpak
fonte
Come è appiccicoso in fondo?
— Sebastian,
0

Ecco un piè di pagina molto semplice e pulito che puoi usare nel bootstrap. Totalmente reattivo!

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

Esempio: CodePen Demo

— Gothburz
fonte
Questa soluzione sposta la barra a piè di pagina verso destra quando si apre il bootstrap modale a causa del posizionamento assoluto!
— thethakuri,
0

L'utilizzo flexboxè il modo più semplice che ho trovato, dai tipi di trucchi CSS . Questo è un vero footer, funziona quando il contenuto è <100% della pagina e> 100% della pagina:

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

E CSS:

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

Nota che questo è bootstrap-agnostico, quindi funziona con bootstrap e senza di esso.

— bustawin
fonte
0

Puoi semplicemente provare ad aggiungere una classe sulla barra di navigazione a piè di pagina:

navbar-fixed-bottom

Quindi crea un CSS chiamato custom.css e body padding come questo ..

body { padding-bottom: 70px; }
— Ikram - Ud - Daula
fonte
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.