Contenuto sovrapposto appiccicoso footstart Bootstrap

Question

Sono nuovo a Bootstrap e sto cercando di usarlo con Symfony2. Ho già una barra topbar principale che viene utilizzata per la navigazione. Il mio problema è quando provo ad aggiungere un footer simile che è appiccicoso in basso, ma si sovrappone al mio contenuto. Sto usando uno script JQuery per evitare il problema per la barra di navigazione in alto, in questo modo:

$(document).ready(function(){ 
     $(document.body).css('padding-top', $('#topnavbar').height()); 
     $(window).resize(function(){ 
      $(document.body).css('padding-top', $('#topnavbar').height()); 
     }); 
    }); 

La struttura del mio layout principale Twig è come questo:

<div class="navbar navbar-default navbar-fixed-top" id="topnavbar"> 
     <div class="container-fluid"> 
     </div> 
    </div> 
    {% block body %} 
    {% endblock %} 
    <footer class="footer navbar-fixed-bottom"> 
    </footer> 

mio CSS è originale. Ho provato con margin bottom o padding bottom ma la sovrapposizione del mio contenuto (nel {% block body%}) è sempre presente e non so cosa fare per risolverlo. Qualcuno ha un'idea?

Answer 1

Come standard, questo è il comportamento previsto per intestazioni e piè di pagina Bootstrap: si attaccano in alto o in basso e si sovrappongono al contenuto principale. La soluzione per piè di pagina è di aggiungere margin-bottom: [footer height]; al body, come nel customisation example on the Bootstrap site:

appiccicoso-footer.css

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

Lei parla margin-bottom nella sua interrogazione, quindi se questo non funziona per potresti forse postare ciò che hai effettivamente provato?

P.S. Questo probabilmente non ha nulla a che fare con Symfony!

Answer 2

Questo è un argomento precedente con nessuna risposta selezionata.

Sono su un modello Bootstrap fresco, porting suo tema corrente per il Bootstrap sezione per sezione :)

Ho un colpo di testa appiccicoso, e voglio che il piè di pagina bloccata per il fondo a TUTTI volte. L'ho fatto funzionare, ma quando ho ridimensionato per vederlo reattivo, il footer si è sovrapposto al contenuto. Avevo bisogno di un padding/spazio tra il "contenuto" e il "footer" in modo che non sembrasse un po 'folto.

margin-bottom sul tag body non ha funzionato, ha aggiunto un gap sotto il mio footer. Quando pensi a come si comporta un margine sul tag "body", ciò ha senso.

La risposta corretta è utilizzare "padding-bottom" sul tag body. Ho usato una dimensione di 6 pixel più grande dell'altezza del mio footer per assicurare questa piccola imbottitura/spaziatura.

body { 
    padding-bottom: 120px; 
} 

.footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: 114px; 
} 

Le vostre altezze sarebbero ovviamente diverse. Spero che questo ti aiuti!

Answer 3

Marchio float: left ha risolto il mio problema .footer { float:left; }