2014-10-13 32 views
8

Ich bin neu in Bootstrap, und ich versuche, es mit Symfony2 zu verwenden. Ich habe bereits ein Haupt-Topbar-Sticky, das für die Navigation verwendet wird. Mein Problem ist, wenn ich versuche, eine ähnliche Fußzeile hinzuzufügen, die unten klebrig ist, aber sie überlappt meinen Inhalt. Ich bin mit einem JQuery-Skript, das Problem für die obere Navigationsleiste zu vermeiden, wie folgt aus:bootstrap sticky footer überlappenden Inhalt

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

Die Struktur meiner wichtigsten Zweig Layout ist wie folgt:

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

Meine CSS Original. Ich habe versucht mit margin bottom oder padding bottom aber die Überlappung meines Inhalts (in der {% Block Körper%}) ist immer vorhanden, und ich weiß nicht, was zu tun ist, um es zu beheben. Hat jemand eine Idee?

Antwort

7

Standardmäßig ist dies das erwartete Verhalten für Bootstrap-Kopf- und Fußzeilen - sie bleiben oben oder unten und überlappen den Hauptinhalt. Die Lösung für Fußzeilen ist margin-bottom: [footer height]; zum body hinzuzufügen, wie in der customisation example on the Bootstrap site:

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

Sie margin-bottom in Ihrer Frage erwähnen, also wenn das nicht funktioniert kannst du vielleicht posten, was du tatsächlich versucht hast?

P.S. Das hat wahrscheinlich nichts mit Symfony zu tun!

+0

Hier ist der Bildschirm dieses Ergebnis: [link] (http://i.imgur.com/0RCYehs.png) Ich versuche haben viel von Ding wie Körper {margin: 0 0 60px; } oder ändere mein jquery-Skript durch Hinzufügen von bottom.nav wie: $ (document.body) .css ('margin-bottom', $ ('# botnavbar'). height()); (mit der richtigen ID in meiner Fußzeile). Aber bisher hat noch nichts geklappt. – lll

+0

Ich denke, es wird schwer sein, ohne den eigentlichen Code zu helfen - den HTML-Code für die Seite und das CSS. Gibt es einen besonderen Grund, warum Sie JQuery verwenden, anstatt Änderungen direkt an CSS vorzunehmen? – frumious

+0

Ich benutze es für das Responsive Ich weiß nicht, ob diese Hilfe aber für mich funktioniert. Ich suche nach [exemple] (http://jeremie.patonnier.net/pages/mentions-legales) diese Fußzeile, aber ich verstehe nicht, warum es immer eine Überlappung gibt, die ich einen Rand-Boden mit ähnlich 110 hinzufüge % es funktioniert, aber wenn ich einen Inhalt hinzufügen, dann muss ich einen anderen Rand unten definieren. (Der Rand unten funktioniert nur, wenn ich das Skript deaktiviere) – lll

19

Dies ist ein älteres Thema ohne Antwort ausgewählt.

Ich bin auf einem frischen Bootstrap-Vorlage, sein aktuelles Thema Portierung Abschnitt für Abschnitt Bootstrap :)

Ich habe einen klebrigen Header, und wollen, dass die verriegelte Fußzeile auf den Boden bei ALLE Zeiten. Ich hatte es funktioniert, aber wenn ich es neu anpasste, um es responsive anzuzeigen, überlappte die Fußzeile den Inhalt. Ich brauchte einen Abstand zwischen "Inhalt" und "Fußzeile", damit es nicht zusammenmustert.

margin-bottom auf dem Body-Tag hat nicht funktioniert, es hat eine Lücke unter meiner Fußzeile hinzugefügt. Wenn Sie darüber nachdenken, wie sich ein Rand auf dem "body" -Tag verhält, macht das nur Sinn.

Die richtige Antwort ist die Verwendung von "padding-bottom" auf dem Body-Tag. Ich verwendete eine Größe 6 Pixel größer als die Höhe meiner Fußzeile, um diese kleine Polsterung/Abstand zu gewährleisten.

body { 
    padding-bottom: 120px; 
} 

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

Ihre Höhen wären natürlich anders. Hoffe das hilft!

+0

Es ist erwähnenswert, dass eine feste Navigationsleiste an der Spitze eine [padding-top] (http://getbootstrap.com/components/#navbar-fixed-top) erfordert der Körper und ähnlich eine feste Fußzeile erfordert einen Padding-Boden – raghav710

+0

Und wie genau soll 'position: absolute' das überlappende Problem beheben? – busuu

+0

Dieser Polsterboden machte den Unterschied! –

0

Fabrikat float: left es mein Problem gelöst .footer { float:left; }

+0

Schwimmer sollten ein letzter Ausweg sein. Sie müssen darüber nachdenken, wie verschiedene Browser Ihre Arbeit interpretieren. Sie möchten etwas Bestimmtes verwenden, das 99% der Browser nicht unterschiedlich interpretieren. Margins, Paddings usw. sollten nach einem Reset auf 99% der Browser funktionieren (wie Bootstrap). Mehrere Browser behandeln Floats anders oder behandeln einen übergeordneten Container anders, wodurch die Floats durcheinander geraten. - Dies gilt insbesondere, wenn mobile benutzerfreundliche Codes berücksichtigt werden. –