it-swarm.com.de

Fußzeile am Ende der Seite, Twitter-Bootstrap

Ich bin im Allgemeinen mit der Technik des Spülens einer Fußzeile mit css vertraut.

Ich habe jedoch einige Probleme damit, diesen Ansatz für Twitter Bootstrap zu nutzen, wahrscheinlich aufgrund der Tatsache, dass Twitter Bootstrap reaktionsschnell ist. Mit Twitter-Bootstrap kann ich die Fußzeile nicht mit dem im obigen Blog-Beitrag beschriebenen Ansatz an den unteren Rand der Seite bündeln.

268
Calvin Cheng

Fand die Schnipsel hier funktioniert wirklich gut für Bootstrap 

Html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
} 

Quelle: Demo und Tutorial (nicht mehr verfügbar; RIP )

299
Chuan Yeong

Dies ist jetzt in Bootstrap 2.2.1 enthalten.

Bootstrap 3.x

Verwenden Sie die Navbar-Komponente und fügen Sie die .navbar-fixed-bottom-Klasse hinzu: 

<div class="navbar navbar-fixed-bottom"></div>

Bootstrap 4.x

<div class="navbar fixed-bottom"></div>

Vergessen Sie nicht, body { padding-bottom: 70px; } hinzuzufügen, da sonst der Seiteninhalt abgedeckt wird.

Dokumente: http://getbootstrap.com/components/#navbar-fixed-bottom

427
sanon

Ein funktionierendes Beispiel für Twitter-Bootstrap NOT STICKY FOOTER

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

Sie benötigen mindestens ein Element mit einem #footer

Wenn die Bildlaufleiste nicht angezeigt werden soll, wenn der Inhalt für den Bildschirm passt, ändern Sie einfach den Wert 10 in 0
.__ Die Bildlaufleiste wird angezeigt, wenn der Inhalt nicht zum Bildschirm passt.

71
HenryW

So implementieren Sie das auf der offiziellen Seite:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Ich habe es gerade getestet und es funktioniert super! :)

HTML

<body>

    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</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.</p>
      </div>

      <div id="Push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

Der relevante CSS-Code 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 !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#Push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
33

Für Sticky Footer verwenden wir zwei DIV's im HTML für den einfachen Sticky Footer - Effekt. Schreiben Sie wie folgt:

HTML

<div class="container"></div>

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
31
sandeep

Viel einfacheres offizielles Beispiel: http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}
26
user

Nun, ich habe eine Mischung aus navbar-inner und navbar-fixed-bottom gefunden.

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

Es scheint gut und funktioniert für mich

enter image description here

Siehe Beispiel in Fiddle

18
Maxim Shoustin

Das hat für mich perfekt funktioniert.

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

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

Ich habe es so benutzt:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

Und es geht über die volle Breite nach unten.

Bearbeiten: Dadurch wird die Fußzeile auf immer sichtbar gesetzt. Dies ist etwas, das Sie berücksichtigen müssen.

11
sp_omer

Sie müssen Ihren .container-fluid div umschließen, damit Ihre klebrige Fußzeile funktioniert. Außerdem fehlen einige Eigenschaften in Ihrer .wrapper-Klasse. Versuche dies:

Entfernen Sie den padding-top:70px aus Ihrem body-Tag und fügen Sie ihn stattdessen wie folgt in Ihren .container-fluid ein:

.wrapper > .container-fluid {
    padding-top: 70px;
}

Wir müssen dies tun, da das Herunterdrücken der body zur Anpassung der Navbar letztendlich die Fußzeile etwas weiter (70 Pixel weiter) an dem Darstellungsbereich vorbeibewegt, sodass eine Bildlaufleiste angezeigt wird. Wir erhalten bessere Ergebnisse, indem Sie stattdessen .container-fluid div verwenden.

Als nächstes müssen wir die .wrapper-Klasse außerhalb Ihres .container-fluiddivs entfernen und Ihren #maindiv wie folgt umschließen:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="Push"></div>
    </div>
</div>  

Ihre Fußzeile muss sich natürlich außerhalb des .wrapper div befinden, entfernen Sie sie also aus dem `.wrapper div und platzieren Sie sie außerhalb:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

Wenn dies erledigt ist, drücken Sie die Fußzeile mit einem negativen Rand näher an Ihre .wrapper-Klasse:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

Und das sollte funktionieren, obwohl Sie wahrscheinlich ein paar andere Dinge ändern müssen, damit es funktioniert, wenn die Bildschirmgröße geändert wird, z. B. das Zurücksetzen der Höhe für die Klasse .wrapper wie folgt:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}
10
Andres Ilich

HenryWs Antwort ist gut, obwohl ich ein paar Anpassungen brauchte, damit es funktioniert, wie ich es wollte. Insbesondere behandelt das Folgende auch:

  • Vermeiden Sie das "Springen" beim Laden der Seite, indem Sie zunächst unsichtbar markieren und die Einstellung in Javascript sichtbar machen
  • Der Umgang mit dem Browser ändert sich würdevoll
  • Setzen Sie die Fußzeile zusätzlich nach hinten, wenn der Browser kleiner wird und die Fußzeile größer als die Seite wird
  • Höhenfunktion Tweaks

Was für mich mit diesen Verbesserungen funktioniert hat:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});
9
Cory

Dies ist der richtige Weg, um es mit Twitter Bootstrap und der neuen Navbar-Klasse mit festem Boden zu tun: (Sie haben keine Ahnung, wie lange ich danach gesucht habe)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
9
Régis B.

In der neuesten Version von Bootstrap 4-alpha konnte ich es mit der Klasse .fixed-bottom tun. 

<div class="fixed-bottom"></div>

So verwende ich es mit der Fußzeile: 

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

Weitere Informationen finden Sie in der Dokumentation placementhier

7
MedAli

Verwenden Sie die Navbar-Komponente und fügen Sie die Klasse .navbar-fixed-bottom hinzu:

<div class="navbar navbar-fixed-bottom"></div>

körper hinzufügen 

  { padding-bottom: 70px; }
4
Admin File3

um Breitenbeschränkungen zu handhaben, verwenden Sie die folgenden Anweisungen, damit Sie keine abgerundeten Ecken erhalten und Ihre Navigationsleiste bündig mit den Seiten der Anwendung abschließt

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

dann können Sie css verwenden, um die Bootstrap-Klassen zu überschreiben, um Höhe, Schriftart und Farbe anzupassen

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }
3
1-14x0r

Sie können jQuery dazu verwenden:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});
2
DucCuong

Getestet mit Bootstrap 3.6.6.

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}
2
Dušan Maďar

Die einfachste Methode besteht wahrscheinlich darin, Bootstrap navbar-static-bottom in Verbindung mit dem Setzen des Hauptcontainers div mit height: 100vh (neues CSS3 Port-Prozentsatz anzeigen ) zu verwenden. Dadurch wird die Fußzeile nach unten gespült.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>
2

Laut Beispiel für Bootstrap 4. funktioniert es tatsächlich so, wenn Sie Ihren Verstand verlieren, wie ich es getan habe:

  • Alle Eltern der Footer Div müssen height: 100% (h-100 Klasse) haben
  • Das direkte übergeordnete Element der Fußzeile muss die Klasse display: flex (d-flex) haben.
  • Die Fußzeile muss margin-top: auto (mt-auto -Klasse) haben

Das Problem ist, dass wir in modernen Front-End-Frameworks häufig zusätzliche Wrapper um diese Elemente haben.

In meinem Fall habe ich zum Beispiel mit Angular die Ansicht aus einem separaten Anwendungsstamm, einer Hauptanwendungskomponente und einer Fußzeilenkomponente zusammengestellt, die alle ihr benutzerdefiniertes Element zum DOM hinzugefügt haben.

Damit dies funktioniert, musste ich diesen Wrapper-Elementen Klassen hinzufügen: einen zusätzlichen h-100, den d-flex eine Ebene nach unten und den mt-auto eine Ebene nach oben aus der Fußzeile (Also eigentlich nicht mehr in der Footer-Klasse, sondern in meinem benutzerdefinierten <app-footer> -Element).

1
MrValueType

Der einzige, der für mich gearbeitet hat:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
1
Ricardo

Verwenden Sie die in Bootstrap 4 integrierten Flex-Dienstprogramme! Folgendes habe ich mir mit den meisten Bootstrap 4-Dienstprogrammen ausgedacht.

<div class="d-flex flex-column" style="min-height: 100vh">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>
  • .d-flex, um das Haupt-Div zu einem flexiblen Container zu machen
  • .flex-column im Hauptbereich, um Ihre flexiblen Elemente in einer Spalte anzuordnen
  • min-height: 100vh zum Haupt-Div, entweder mit einem Style-Attribut oder in Ihrem CSS, um das Ansichtsfenster vertikal auszufüllen
  • .flex-grow-1 auf dem Containerelement, damit der Hauptcontainer den gesamten Platz in Anspruch nimmt, der in der Höhe des Ansichtsfensters verbleibt.
1
EGhost57
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

Die Höhe der Fußzeile entspricht der Größe des unteren Einzugs des Wickelelements.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
1
Sharpless512

Halte es einfach.

footer {
  bottom: 0;
  position: absolute;
}

Sie müssen möglicherweise auch die Höhe der Fußzeile versetzen, indem Sie der body einen margin-bottom hinzufügen, der der Höhe der Fußzeile entspricht.

0
obfk

So macht es bootstrap:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Verwenden Sie einfach die Seitenquelle und Sie sollten sehen können. Vergiss nicht den <div id="wrap"> und die Spitze.

0
Bren

Hier ist ein Beispiel mit css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

Geige

0
Victor

Hier finden Sie den Ansatz in HAML ( http://haml.info ) mit Navbar oben und Fußzeile unten auf der Seite: 

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER
0
Hannes

Verwenden Sie die unterste Klasse, um die letzte Zeile der Seite zu drücken und die Mitte der Seite festzulegen. Wenn Sie die HAML-Seite von Ruby on Rails verwenden, können Sie den folgenden Code verwenden .%footer.card.text-center

Bitte vergessen Sie nicht, Twitter bootstrapp zu verwenden

Hier ist eine Lösung für die neueste Version von Bootstrap (4.3 zum Zeitpunkt des Schreibens) unter Verwendung von Flexbox.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

Und ein Codepen-Beispiel: https://codepen.io/tillytoby/pen/QPdomR

0
Tom T

eine andere mögliche Lösung, nur mit Medienabfragen

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
0
GeorgeWL

Es sieht so aus, als würde die height:100%-Kette bei div#main gebrochen werden. Versuchen Sie, height:100% hinzuzufügen, wodurch Sie Ihrem Ziel möglicherweise näher kommen.

0
brains911