it-swarm.com.de

Twitter Bootstrap 3 Sticky Footer

Ich benutze das Twitter-Bootstrap-Framework bereits seit einiger Zeit und wurde kürzlich auf Version 3 aktualisiert.

Ich habe Probleme, die klebrige Fußzeile an der Unterseite festzuhalten. Ich habe die von der Twitter-Bootstrap-Website bereitgestellte Starter-Vorlage verwendet.

193
Brad Fletcher

fügen Sie einfach die Klasse navbar-fixed-bottom in Ihre Fußzeile ein.

<div class="footer navbar-fixed-bottom">
186
Jon

In Bezug auf das offizielle Boostrap3-Beispiel für die klebrige Fußzeile Muss <div id="Push"></div> nicht hinzugefügt werden, 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>

Sie finden den Link für diese css im Quellcode von sticky-footer exmaple .

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

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

150
tkymtk

Hier ist eine Methode, die eine klebrige Fußzeile hinzufügt, die kein zusätzliches CSS oder Javascript benötigt, außer was bereits in Bootstrap vorhanden ist, und die 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>
50
anataliocs

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

Die Grundstruktur für das 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übertragung
Ansicht bearbeiten

34
David Taiaroa

Ich bin etwas spät dran bei dem Thema, aber ich bin auf diesen Beitrag gestoßen, da ich gerade von dieser Frage gebissen wurde und schließlich einen wirklich einfachen Weg gefunden habe, um darüber hinwegzukommen. Verwenden Sie einfach ein navbar mit aktivierter navbar-fixed-bottom-Klasse. Zum Beispiel:

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

HTH

28
iMil

Hier ist der Sticky Footer vereinfachter Code von heute, da sie immer optimiert werden und das ist gut:

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

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

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

Die Push div sollte direkt nach der wrap gehen, NICHT innerhalb von .. genau 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>
2
Joseph

Das klebrige Beispiel funktioniert nicht für mich ... Meine Lösung:

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
2
Andi Giga

Einfache js

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

Ich wollte eine flexible klebrige Fußzeile , weshalb ich hierher gekommen bin. Top 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 untere Rand des Bodens einen Push, um eine Tasche für die Fußzeile zu ermöglichen. In diesem Fall sind beide auf 60px eingestellt. Wenn die Fußzeile jedoch nicht festgelegt ist und die Höhe von 60px überschreitet, deckt sie Ihren Seiteninhalt ab.

Flexibel machen: Löschen Sie den CSS-Körperrand und die Fußzeilenhöhe. Fügen Sie dann JavaScript hinzu, um die Höhe der Fußzeile zu erhalten, und legen Sie den unteren Rand des Körpers fest. 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 des setfooter ändern. Hinweis: Wenn Ihre Fußzeile ein Akkordeon oder etwas anderes hat, das eine Größenänderung auslöst, ohne dass die Fenstergröße geändert wird, müssen Sie die Funktion setfooter () erneut aufrufen.

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

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>

2
Sterner

Ich schreibe mit LESS meinen vereinfachten Sticky Footer-Code mit Polsterung. Diese Antwort ist wahrscheinlich außerhalb des Themas, da die Frage nicht über das Auffüllen spricht. Wenn Sie daran interessiert sind, überprüfen 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;
}
1
Fred K

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

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}
body > * {
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
     -moz-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}
body > nav + .container {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
     -moz-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}



/* Reset CSS and some footer styling. Only needed on StackOverflow */
body {
  padding: 50px 0 0;
  margin: 0;
}
footer {
  background-color: #f8f8f8; 
  padding: 15px 0 5px; 
  border-top: 1px solid #e7e7e7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>

     <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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 id="navbar" 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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" 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>
    </nav>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Responsive sticky footer of any height</h1>
      </div>
      <p class="lead">You can have a sticky footer of any height using this CSS. It's also fully responsive, no JavaScript needed.</p>
      
    </div>

    <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
        <p class="text-muted">And some more content.</p>
        <p class="text-muted">And more...</p>
      </div>
    </footer>

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

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

Basierend auf Jek-fdrvs Antwort habe ich eine .on('resize', function() hinzugefügt, um sicherzustellen, dass sie 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");
    }
});
1
iamchriswick

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 Inhalt in den Hauptbereich einfügen, wird die Fußzeile am unteren Rand des Viewports nach unten gedrückt. Es ist überhaupt nicht klebrig.

1
CJ Catalano

Dies wurde von flexbox einmal und für immer gelöst:

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

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

Um alles zusammenzufassen, behalten Sie nur eine Sache im Kopf, dass alles außer Fußzeile min-height: 100% oder etwas weniger haben sollte.

1
kshirish

Die Verwendung von flexbox ist der einfachste Weg, den ich von den CSS-Tricks gefunden habe. Dies ist richtig klebrige Fußzeile, sie 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-agnostic ist, also funktioniert es mit bootstrap und ohne.

0
bustawin

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

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

0
Gothburz

Sie können einfach versuchen, eine Klasse in Ihre Fußzeile-Navigationsleiste einzufügen:

navbar-fixed-bottom

Erstellen Sie dann ein CSS mit dem Namen custom.css und body padding wie folgt.

body { padding-bottom: 70px; }
0

Wenn Sie Bootstrap-Klassen für die Fußzeile verwenden möchten. 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 Inhalte durch die feste Fußzeile überlappen, und der padding-bottom wird angepasst, wenn der Benutzer die Fenster-/Bildschirmgröße ändert.

Im obigen Skript ging ich davon aus, dass die Fußzeile direkt im Body-Tag wie folgt 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 (wegen der JS, die vermieden werden könnte), aber es funktioniert ohne Probleme mit Überschneidungen, es ist einfach zu implementieren und zu reagieren (height ist in CSS nicht fest codiert).

0
jmarceli

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/

0
equivalent8

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

0
Gpak

Verwenden Sie einfach Flex! Stellen Sie sicher, dass Sie in HTML HTML und main verwenden, da dies eine der besten Lösungen ist (sofern Sie keine Unterstützung für IE9 benötigen). Es ist keine feste Höhe oder ähnliches erforderlich.

Das wird auch für Materialise empfohlen!

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

main {
    flex: 1 0 auto;
}
0
kentor