Twitter Bootstrap 3 Sticky Footer

204

Ich benutze das Twitter-Bootstrap-Framework schon eine ganze Weile und sie wurden kürzlich auf Version 3 aktualisiert!

Ich habe Probleme, die klebrige Fußzeile nach unten zu bringen. Ich habe die Starter-Vorlage verwendet, die von der Twitter-Bootstrap-Website bereitgestellt wird, aber immer noch kein Glück, irgendwelche Ideen?

html css twitter-bootstrap twitter-bootstrap-3 Brad Fletcher
quelle
31
offizielles Beispiel: getbootstrap.com/examples/sticky-footer-navbar
ptim
3
@memeLab warum hat das offizielle Beispiel nichts über den Körperrand unten: -60px? Oder habe ich es vermisst ...?
Ganders
Es wurde eine reine CSS-Lösung hinzugefügt, die eine variable Höhe für klebrige Fußzeilen ermöglicht. Verknüpft es hier als neue Antwort, es ist am Ende der Seite.
Tao

Antworten:

193

Fügen Sie einfach die Klasse navbar-fixed-bottom zu Ihrer Fußzeile hinzu.

<div class="footer navbar-fixed-bottom">
Jon
quelle
32
Dies ist nicht das gleiche wie klebrige Fußzeile
Yura Omelchuk
3
Wenn Sie Kopf- und Fußzeilen haben, verlieren Sie zu viel Speicherplatz auf einem mobilen Gerät.
Strattonn
4
@ Strattonn das ist, was Medienanfragen sind
Jacob Raccuia
20
Dies funktioniert perfekt, wenn die Seite keinen Bildlauf benötigt. Die Fußzeile überschneidet sich jedoch mit mehr Inhalt auf der Seite. Gibt es eine Problemumgehung? Vielen Dank!
Xplora
1
Sie sind sich über das Überlappungsproblem nicht sicher, aber löst das Hinzufügen von Rand / Auffüllung das Problem nicht?
Jon
152

In Bezug auf das offizielle Beispiel für die klebrige Fußzeile von Boostrap3 muss nichts hinzugefügt werden <div id="push"></div>, und das CSS ist einfacher.

Das im offiziellen Beispiel verwendete CSS lautet:

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

und das wesentliche HTML:

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

Den Link zu diesem CSS finden Sie im Quellcode des Sticky-Footer-Beispiels .

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

Vollständige URL: http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

tkymtk
quelle
21
Das HTML & CSS im offiziellen Sticky-Footer-Beispiel unterscheidet sich jetzt erheblich von dem, was hier beschrieben wird, z. B. wird kein 'Wrap'-Div mehr verwendet.
IanB
52

Hier ist eine Methode, mit der eine klebrige Fußzeile hinzugefügt wird, für die kein zusätzliches CSS oder Javascript erforderlich ist, außer dem, was bereits in Bootstrap enthalten ist, und die Ihre aktuelle Fußzeile nicht beeinträchtigt.

Beispiel hier: Easy Sticky Footer

Kopieren Sie dies einfach und fügen Sie es direkt in Ihren Code ein. Keine Aufregung, kein Muss.

<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
quelle
4
Sehr schön und schnell. Kann auch reagieren. Es ist jedoch erforderlich, am unteren Rand des Seiteninhalts zusätzlichen Platz hinzuzufügen, damit dieser nicht in der Fußzeile ausgeblendet wird. Der Raum sollte die Höhe haben, die der Fußzeilenhöhe entspricht. Können Sie zeigen, wie das am besten geht? Übrigens "erfordert kein CSS" ist technisch falsch. Es sollte "erfordert kein zusätzliches CSS außer Bootstrap-Klassen" .
ADTC
1
Ich finde es toll, dass dies das nutzt, was in Bootstrap vorhanden ist. Ich konnte die anderen Top-Antworten nicht zum Laufen bringen, aber ich habe sie in meine Seite und meine klebrige Fußzeile eingefügt. Vielen Dank!
haakon.io
34

Denken Sie daran, dass Sie zusätzlich zu dem gerade hinzugefügten CSS das Push-Div hinzufügen müssen bevor Sie das Wrap-Div schließen

Die Grundstruktur für den HTML ist 

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

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

Live-Ansicht Ansicht
bearbeiten

David Taiaroa
quelle
Wenn der Seiteninhalt größer als die verfügbare Anzeige ist, wird die Fußzeile nach unten gedrückt. Ich möchte, dass die Fußzeile wirklich am Boden klebt (wie Navbar-Fixed-Bottom)
blueFast
hey @delavnog, würde so etwas für dich funktionieren? codepen.io/panchroma/pen/wMXWpY . Die einzigen wichtigen Punkte für Sie sind das HTML in Zeile 647 und das CSS
David Taiaroa
@ Delavnog, gleiche Idee mit minimalem Inhalt auf der Seite codepen.io/panchroma/pen/JGZKqy
David Taiaroa
Danke, das ist großartig! Wenn ich den Hauptteil vertikal zwischen Navi und Fußzeile zentrieren könnte, wäre das großartig! Bearbeiten Sie Ihren Codepen: codepen.io/anon/pen/rxKMaW (Ich musste dem Körper einen Rand hinzufügen, weil das
Navi
@ Delavnog, hier ist ein Anfang, wenn der Hauptteil nicht zu hoch ist. Es würde jedoch mehr Arbeit für längere Inhalte erfordern
David Taiaroa
30

Hier ist der vereinfachte Code für Sticky Footer ab heute, da er ständig optimiert wird und dies GUT ist:

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
quelle
1
Perfekte Lösung. Das habe ich gesucht.
Levimatt
1
Leider hat diese Fußzeile eine feste Größe. Wenn die Fußzeile dynamisch ist, kann sie manchmal größer oder kleiner sein als ihre Höhe in CSS.
23W
27

Ich bin etwas spät dran, aber ich bin auf diesen Beitrag gestoßen, da ich gerade von dieser Frage gebissen wurde und endlich einen wirklich einfachen Weg gefunden habe, darüber hinwegzukommen. Verwenden Sie einfach a navbarmit navbar-fixed-bottomaktivierter Klasse. Beispielsweise:

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

HTH

iMil
quelle
Ich mag die Einfachheit und Effektivität Ihrer Antwort, die übrigens eine intelligente Antwort ist. Viele Antworten auf das gleiche Problem sind voller Fragen und komplizierter Dinge. Danke, Mann.
Digitai
1
Es ist eine halbe Lösung, Sie müssen sich immer noch um die Überlappungen des Inhalts auf Ihrer Seite kümmern, wenn Sie die Größe ändern.
Baldráni
@ Baldráni Nein, es ist eine vollständige Lösung, Überlappungen funktionieren gut, wenn Sie Bootstrap-Zeile und Spalte in der Fußzeile HTML verwenden (was Sie sowieso tun sollten)
Tino Mclaren
Dies ist keine klebrige Fußzeile. Es handelt sich um eine feste untere Navigationsleiste, die nur für Navigationsleisteninhalte geeignet ist und den Seiteninhalt überlappt.
Zim
10

Hier ist meine aktualisierte Lösung für dieses Problem. 

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

Und benutze es so: 

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

Oder 

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;
}
zee
quelle
4
Dies ist keine gute Lösung, da Ihre Fußzeile fixiert ist, was bedeutet, dass sie den Seiteninhalt (falls vorhanden) überlappt. Fügen Sie some text<br>vor der Fußzeile einige Zeilen hinzu und verkleinern Sie das Fenster.
Jmarceli
@ user2041318: Ja, das ist schrecklich ... danke, dass du darauf hingewiesen hast.
Sebastian
Dies wurde gemäß jmarceli Kommentar korrigiert. Die Fußzeile ist nicht mehr fixiert.
Zee
3

Das klebrige Beispiel funktioniert bei mir nicht. Meine Lösung:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
Andi Giga
quelle
Einfaches, gutes altmodisches CSS. Job erledigt. Ich finde es amüsant, wie verworren einige der höher bewerteten Antworten sind. Soll Bootstrap nicht unser Leben leichter machen? 😂
Kal
2

Der Push divsollte direkt nach dem gehen wrap, NICHT innerhalb .. einfach so 

<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>
Joseph
quelle
2

Beantwortet vom OP:

Fügen Sie dies Ihrer CSS-Datei hinzu.

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

Ich wollte eine flexible, klebrige Fußzeile , deshalb bin ich hierher gekommen. Die besten Antworten haben mich in die richtige Richtung gebracht.

Die aktuelle (2. Oktober 16) Bootstrap 3 CSS Sticky-Fußzeile (feste Größe) sieht folgendermaßen aus:

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

Solange die Fußzeile eine feste Größe hat, erzeugt der Körperrand unten einen Druck, damit die Fußzeile in einer Tasche sitzen kann. In diesem Fall sind beide auf 60 Pixel eingestellt. Wenn die Fußzeile jedoch nicht festgelegt ist und eine Höhe von 60 Pixel überschreitet, wird Ihr Seiteninhalt abgedeckt.

Flexibel machen: Löschen Sie den CSS-Körperrand und die Fußzeilenhöhe. Fügen Sie dann JavaScript hinzu, um die Fußzeilenhöhe zu ermitteln und den Body marginBottom festzulegen. Dies geschieht mit der Funktion setfooter (). Fügen Sie als Nächstes Ereignis-Listener hinzu, wenn die Seite zum ersten Mal geladen wird und wenn Sie die Größe ändern, wird der Setfooter ausgeführt. Hinweis: Wenn Ihre Fußzeile ein Akkordeon oder etwas anderes hat, das eine Größenänderung auslöst, ohne die Größe des Fensters zu ändern, müssen Sie die Funktion setfooter () erneut aufrufen.

Führen Sie das Snippet und dann den Vollbildmodus aus, um es zu testen.

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>
Erweitern Sie das Snippet

Sterner
quelle
2

Dies wurde von flexbox ein für alle Mal gelöst:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Der HTML

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

Das CSS

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

.Site-content {
  flex: 1;
}
Konstantin Schubert
quelle
2

Einfache js

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

Update Nr. 1

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

Um all dies zusammenzufassen, denken Sie nur an eines, das alles außer der Fußzeile min-height: 100%oder etwas weniger haben sollte.

kshirish
quelle
1

Ich schreibe meinen vereinfachten klebrigen Fußzeilencode mit Polsterung mit WENIGER. Diese Antwort ist wahrscheinlich nicht zum Thema gehörend, da die Frage nicht über Polsterung spricht. Wenn Sie also interessiert sind, lesen Sie diesen Beitrag für weitere Details.

@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.
quelle
1

Basierend auf der Antwort von Jek-fdrv habe ich eine hinzugefügt .on('resize', function(), um sicherzustellen, dass es auf jedem Gerät und jeder Auflösung funktioniert:

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

Die aktuelle Version von Bootstrap scheint für diese Funktion nicht mehr zu funktionieren. Wenn Sie das Beispiel für die Sticky-Footer-Navbar herunterladen und eine große Menge an Inhalten im Hauptteilbereich platzieren, wird die Fußzeile über den unteren Rand des Ansichtsfensters hinaus nach unten gedrückt. Es ist überhaupt nicht klebrig.

CJ Catalano
quelle
1

Hier ist eine CSS-basierte Lösung für eine voll ansprechende, klebrige Fußzeile mit variabler Höhe.
Vorteil: Die Fußzeile ermöglicht eine variable Höhe, da die Höhe in CSS nicht mehr fest codiert werden muss.

Code-Snippet anzeigen

Und hier ist das nicht vorangestellte SCSS(für gulp/ grunt):

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

Verwenden Sie einfach Flex! Stellen Sie sicher, dass Sie body und main in Ihrem HTML-Code verwenden. Dies ist eine der besten Lösungen (es sei denn, Sie benötigen IE9-Unterstützung). Es erfordert keine feste Höhe oder ähnliches.

Das wird auch für Materialise empfohlen!

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

main {
    flex: 1 0 auto;
}
Kentor
quelle
0

in Haml & Sass Worten alles was nötig ist:

Haml für app/view/layouts/application.html.haml

%html
  %head
  %body
    Some  body stuff

    %footer
      footer content

Sass für 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

basierend auf http://getbootstrap.com/examples/sticky-footer-navbar/

Äquivalent8
quelle
0

Wenn Sie Bootstrap verwenden möchten, bauen Sie Klassen für die Fußzeile ein. Sie sollten auch etwas Javascript schreiben:

$(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());
  };
 });

Dadurch wird verhindert, dass sich Inhalte in der festen Fußzeile überschneiden, und die padding-bottom wann der Benutzer die Fenster- / Bildschirmgröße ändert.

Im obigen Skript habe ich angenommen, dass die Fußzeile wie folgt direkt im Body-Tag platziert wird:

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

Dies ist definitiv nicht die beste Lösung (aufgrund der JS, die vermieden werden könnte), aber es funktioniert ohne Probleme mit Überlappungen, es ist einfach zu implementieren und reagiert ( heightist in CSS nicht fest codiert).

jmarceli
quelle
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>
Erweitern Sie das Snippet

Gpak
quelle
Wie ist das unten klebrig?
Sebastian
0

Hier ist eine sehr einfache und saubere Fußzeile, die Sie im Bootstrap verwenden können. Total ansprechbar!

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

Beispiel: CodePen-Demo

Gothburz
quelle
Diese Lösung verschiebt die Fußzeile beim Öffnen des Bootstrap-Modals aufgrund der absoluten Positionierung nach rechts!
Thethakuri
0

Die Verwendung flexboxist der einfachste Weg, den ich von den Jungs von CSS-Tricks gefunden habe . Dies ist eine echte Sticky-Footer-Funktion, die funktioniert, wenn der Inhalt <100% der Seite und> 100% der Seite ist:

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

Und CSS:

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

Beachten Sie, dass dies Bootstrap-unabhängig ist, sodass es mit und ohne Bootstrap funktioniert.

Bustawin
quelle
0

Sie können einfach versuchen, eine Klasse in Ihrer Fußzeilen-Navigationsleiste hinzuzufügen:

navbar-fixed-bottom

Erstellen Sie dann ein CSS mit dem Namen custom.css und Body Padding wie folgt .

body { padding-bottom: 70px; }
Ikram - Ud - Daula
quelle