Fußzeile zum Ende der Seite spülen, Twitter-Bootstrap

306

Ich bin allgemein mit der Technik vertraut, eine Fußzeile mit CSS zu leeren.

Ich habe jedoch einige Probleme damit, diesen Ansatz für den Twitter-Bootstrap zum Laufen zu bringen, was höchstwahrscheinlich auf die Tatsache zurückzuführen ist, dass der Twitter-Bootstrap von Natur aus reagiert. Mit Twitter Bootstrap kann ich die Fußzeile nicht dazu bringen, mit dem im obigen Blog-Beitrag beschriebenen Ansatz zum Ende der Seite zu gelangen.

css  twitter-bootstrap  footer 
— Calvin Cheng
quelle
Bevor Sie alle unten aufgeführten Antworten testen, denken Sie daran, dass das OP möchte, dass es mit Twitter-Bootstrap funktioniert. Da dies kein Muss ist, funktioniert Twitter-Bootstrap mit Jquery, was bedeutet, dass Javascript aktiviert ist. Aus diesem Grund testen Sie einfach meine Antwort: stackoverflow.com / Fragen / 10099422 /…
— HenryW
4
— Benutzer
1
Link ist kaputt! Kann jemand bitte den offiziellen Beispiellink reparieren?
— PassionInfinite
1
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar es könnte in Zukunft aufgrund von 4.0 eine ältere Version werden, denke ich.
— Ammad Khalid

Antworten:

324

Fand die Snippets 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;
}
— Chuan Yeong
quelle
Dies ist die beste Lösung, die ich bisher versucht habe. Akzeptierte dies als Antwort.
— Calvin Cheng
Hallo, ich habe diese Methode implementiert, sie funktioniert hervorragend, aber jetzt habe ich einige Probleme mit der Anzeige der Seite auf dem iPhone (die Seite ist vergrößert). Irgendwelche Ideen, was ist das Problem? Hier sind einige Details: stackoverflow.com/questions/18621090/…
— pupadupa
94
Nur für den Fall, dass Sie diese Antwort gelesen und nicht nach unten
— gescrollt haben
4
— HenryW
1
Dies ist die beste Methode, die ich für Bootstrap gefunden habe. Denken Sie für die Reaktionsfähigkeit des Geräts daran, Medienabfragen zu verwenden, um die Höhe von #main und .footer für verschiedene Bildschirmgrößen zu aktualisieren
— SyntaxGoonoo
467

Dies ist jetzt in Bootstrap 2.2.1 enthalten.

Bootstrap 3.x.

Verwenden Sie die Navbar-Komponente und fügen Sie eine .navbar-fixed-bottomKlasse hinzu:

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

Bootstrap 4.x.

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

Vergessen Sie nicht, body { padding-bottom: 70px; }den Seiteninhalt hinzuzufügen oder anderweitig abzudecken.

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

— Sanon
quelle
35
@ChuanYeong Leider gibt es keine navbar-static-bottom.
— Lawrence Woodman
25
@MikeCurry fragte er nicht nach einer festen Fußzeile, sondern nach einer, die den leeren Raum "ausfüllt", wenn Ihre Seite nicht genug Inhalt hat, damit die Fußzeile unten bleibt. Wenn Ihre Fußzeile nur zur Information dient, nimmt eine feste nur wertvollen Platz ein.
— Rdlu
22
Dies ist keine klebrige Fußzeile, da sie verwendet wird. Position: fest; was nicht richtig ist
— Furkat U.
9
Ja, diese Lösung wird nur am unteren Rand des Ansichtsfensters und nicht am unteren Rand der Seite angezeigt. dh die Fußzeile ist immer sichtbar.
— Risma
3
Musste die Antwort ablehnen, weil es Verwirrung stiftet. Das OP will keine klebrige Fußzeile.
— HenryW
77

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>

Version, die immer aktualisiert wird, wenn der Benutzer devtools öffnet oder die Fenstergröße ändert.

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

Sie benötigen mindestens ein Element mit einem #footer

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

— HenryW
quelle
9
Ja, ich bin auch mit diesem gegangen. CSS kann manchmal so dumm sein. Nicht, dass es unmöglich wäre, aber es kann schwierig sein, Allzwecklösungen zu finden, und das Beheben von lästigen Dingen wie diesen in unseren Layouts sollte keine Ausflüge zum Stapelaustausch, zu mehreren wesentlichen Überarbeitungen, zum Cross-Browser-Testen und zur eventuellen Übergabe an einen einfachen JS erfordern Trick. Ja, ich fühle mich ein bisschen schmutzig, aber zumindest funktioniert es.
— Meecect
3
Jede einzelne Lösung, die ich mir angesehen habe, ist falsch. Dies ist die EINZIGE, die tatsächlich das tut, was sie tun soll - kleben Sie die Fußzeile an den unteren Rand der Seite, ohne den Inhalt zu verdecken, wenn die Größe des Browsers geändert wird.
— Dave
13
es funktionierte nicht ruhig wie auch für mich erwartete, noch einer der besseren Antworten, feste i mein Problem durch den Austausch $('#footer').height();mit$('#footer').outerHeight();
— DarkMukke
3
Gute Antwort! Ich hatte ein paar Anpassungen, von denen ich denke, dass sie es hier verbessern: stackoverflow.com/a/36385654/8207
— Cory
6
Die beste Antwort, die ich gefunden habe. Wenn Sie möchten, dass es nach der Größenänderung des Fensters funktioniert, geben Sie einfach den Hauptcode aus der Antwort ein $(window).resize(function() {//main code goes here});und rufen Sie $(window).resize();auf, um ihn beim Laden der Seite festzulegen.
— Szymon Sadło
36

So implementieren Sie dies auf der offiziellen Seite:

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

Ich habe es gerade getestet und es funktioniert großartig! :) :)

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;
    }
}
— Leniel Maccaferri
quelle
7
Vielen Dank, dass Sie dies gepostet haben. Es war definitiv die beste Lösung (ganz zu schweigen von der einzigen, die funktioniert hat) für mein spezielles Projekt, und natürlich ist es schön, dass es direkt aus dem Projekt selbst stammt.
— Cory W.
1
Ich weiß nicht, was der Deal war, aber ich konnte ihn nicht zum Laufen bringen, ohne den Seiten eine Schriftrolle hinzuzufügen. Am Ende habe ich das .wrapper-CSS so geändert, dass die Mindesthöhe "calc (100% - 120px)" war, wobei 120px die Höhe meiner Fußzeile ist, und das <div id = "push"> </ div> aus dem HTML-Code entfernt da es nichts anderes zu tun schien, als der Seite Höhe hinzuzufügen, die ich nicht brauchte.
— jammyman34
36

Für Sticky Footer verwenden wir zwei DIV'sin dem HTML - Code für grundlegenden sticky Footer - Effekt. Schreiben Sie so:

HTML

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

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
— Sandeep
quelle
7
Er sagte, er benutze Twitter Bootstrap. Was wäre der einfachste Weg, dies in Bootstrap zu integrieren, ohne den HTML-Code vollständig neu zu schreiben?
— Cody Gray
1
Wenn OP den Sticky Footer-Effekt erzielen möchte, muss er seinen MarkUp
— Sandeep
Danke dir! Dies war die einzige Methode, die für mich in einer ASP.NET MVC5-Site, die Bootstrap verwendet, tatsächlich funktioniert hat. +1
— Yann Duran
19

Nun, ich habe eine Mischung aus navbar-innerund gefunden navbar-fixed-bottom

<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

Geben Sie hier die Bildbeschreibung ein

Siehe Beispiel in Fiddle

— Maxim Shoustin
quelle
2
einfachste und eleganteste Lösung. Seien Sie misstrauisch, wenn Sie Ihren eigenen CSS-Code zu Hause brauen, da dieser nicht abwärtskompatibel mit Bootstrap ist
— 1-14x0r
Ich habe dies verwendet und hatte ein Problem mit einem alten Android (vielleicht?) Mit Seiten, die kürzer als der Bildschirm waren. Ansonsten funktionierte es gut auf FF, Chrome, IE11, iPhone, Nexus 7.
— Bnieland
Perfekt und extrem einfach!
— Ramires.cabral
18

In der neuesten Version von Bootstrap 4.3 kann dies mit .fixed-bottomclass erfolgen. 

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

Sie finden weitere Informationen in der finden Position Dokumentation hier .

— Mohamed Ali JAMAOUI
quelle
1
Dies funktioniert immer noch mit der offiziellen 4-Version.
— Klewis
Beachten Sie, dass das Beispiel unter getbootstrap.com/docs/4.1/examples/sticky-footer eine Zeilenhöhe = 60 Pixel für das Fußzeilenelement aufweist. Dies ist nicht nur unnötig, sondern verhindert auch, dass die Fußzeile ordnungsgemäß funktioniert, wenn es sich um das übergeordnete Element eines oder mehrerer div-Elemente handelt, was häufig der Fall ist.
— ScottyB
13

Die Antwort von HenryW ist gut, obwohl ich ein paar Verbesserungen brauchte, damit es so funktioniert, wie ich es wollte. Insbesondere wird auch Folgendes behandelt:

  • Vermeiden Sie die "Unruhe" beim Laden von Seiten, indem Sie zuerst unsichtbar markieren und die Einstellung in Javascript sichtbar machen
  • Der Umgang mit dem Browser ändert die Größe ordnungsgemäß
  • Außerdem wird die Fußzeile auf der Seite gesichert, wenn der Browser kleiner und die Fußzeile größer als die Seite wird
  • Höhenfunktion optimiert

Folgendes hat bei diesen Optimierungen für mich funktioniert:

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;
});
— Cory
quelle
11

Das hat bei mir 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 setzt sich über die gesamte Breite nach unten.

Bearbeiten: Dadurch wird die Fußzeile so eingestellt, dass sie immer sichtbar ist. Dies müssen Sie berücksichtigen.

— sp_omer
quelle
10

Sie müssen Ihr .container-fluidDiv umschließen, damit Ihre klebrige Fußzeile funktioniert. Außerdem fehlen Ihnen einige Eigenschaften in Ihrer .wrapperKlasse. Versuche dies:

Entfernen Sie das padding-top:70pxvon Ihrem bodyTag und fügen Sie es in Ihr ein.container-fluid stattdessen wie :

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

Wir müssen das tun, weil wir das drücken body Taste nach unten, um die Navigationsleiste aufzunehmen, die Fußzeile etwas weiter (70 Pixel weiter) am Ansichtsfenster vorbei gedrückt wird, sodass eine Bildlaufleiste angezeigt wird. Wir erzielen bessere Ergebnisse, wenn wir .container-fluidstattdessen die Div drücken .

Als nächstes müssen wir die .wrapperKlasse außerhalb Ihres .container-fluidDiv entfernen und Ihre einwickeln#main Div damit , wie folgt:

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

Ihre Fußzeile muss natürlich außerhalb des .wrapperDivs sein, also entfernen Sie sie aus dem `.wrapper Div und platzieren Sie sie wie folgt draußen:

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

Nachdem dies alles erledigt ist, schieben Sie Ihre Fußzeile ordnungsgemäß näher an Ihre .wrapperKlasse heran, indem Sie einen negativen Rand verwenden, wie folgt :

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

Und das sollte funktionieren, obwohl Sie wahrscheinlich einige andere Dinge ändern müssen, damit es funktioniert, wenn die Größe des Bildschirms geändert wird, z. B. das Zurücksetzen der Höhe für die .wrapperKlasse:

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

Dies ist der richtige Weg, um dies mit Twitter Bootstrap und der neuen Klasse "navbar-fixed-bottom" 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>
— Régis B.
quelle
9

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 den Hauptteil zu einem flexiblen Behälter zu machen
  • .flex-column auf der Hauptdiv, um Ihre Flex-Elemente in einer Spalte anzuordnen
  • min-height: 100vh zum Hauptteil, entweder mit einem Stilattribut oder in Ihrem CSS, um das Ansichtsfenster vertikal zu füllen
  • .flex-grow-1 Auf dem Container nimmt das Element, damit der Hauptinhaltscontainer den gesamten in der Höhe des Ansichtsfensters verbleibenden Platz einnimmt.
— EGhost57
quelle
Anstelle min-height: 100vhder min-vh-100Klasse von Bootstrap kann auch verwendet werden.
— ikonuk
Diese Lösung funktionierte hervorragend, einschließlich des Min-VH-100-Vorschlags von @ikonuk
— TGR,
4

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; }
— Admin-Datei3
quelle
3

Verwenden Sie Folgendes, um Layouts mit Breitenbeschränkungen zu handhaben, 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>

Anschließend können Sie die Bootstrap-Klassen mithilfe von CSS ü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;
    }
— 1-14x0r
quelle
3

Sie können jQuery verwenden, um dies zu handhaben:

$(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();
    });
});
— DucCuong
quelle
2

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;
}
— Ricardo
quelle
2

Die einfachste Technik ist wahrscheinlich die Verwendung von Bootstrap navbar-static-bottomin Verbindung mit dem Festlegen des Hauptcontainer-Div mit height: 100vh(neuer Prozentsatz des CSS3- Ansichtsports ). 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>
— Pan Wangperawong
quelle
2

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;
}
— Dušan Maďar
quelle
1 
#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 Fußzeilenhöhe entspricht der Größe des unteren Einzugs des Wrap-Elements.

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

Hier ist eine Lösung für die neueste Version von Bootstrap (4.3 zum Zeitpunkt des Schreibens) mit 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

— Tom T.
quelle
1

Gemäß dem Bootstrap 4.3-Beispiel funktioniert es tatsächlich so, wenn Sie wie ich Ihre geistige Gesundheit verlieren:

  • Alle Eltern der Fußzeilendiv müssen height: 100%( h-100Klasse) haben
  • Das direkte übergeordnete Element der Fußzeile muss display: flex( d-flexKlasse) haben
  • Die Fußzeile muss margin-top: auto( mt-autoKlasse) 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 beispielsweise mit Angular die Ansicht aus einem separaten App-Stammverzeichnis, einer Haupt-App-Komponente und einer Fußzeilen-Komponente zusammengestellt, die alle ihr benutzerdefiniertes Element zum DOM hinzugefügt haben.

Damit es funktioniert, musste ich diesen Wrapper-Elementen Klassen hinzufügen: eine zusätzliche h-100, die d-flexeine Ebene nach unten und die mt-autoeine Ebene von der Fußzeile nach oben verschiebt (also ist es eigentlich nicht mehr in der Fußzeilenklasse, sondern in meiner <app-footer>Gewohnheit Element).

— MrValueType
quelle
Ich musste auch class="h-100"auf den <html>Tag setzen.
— Kel Solaar
1

Verwenden Sie diesen Code in Bootstrap, es funktioniert

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>
— Sanjay
quelle
1

Bootstrap v4 + Lösung

Hier ist eine Lösung, bei der weder die HTML-Struktur noch zusätzliche CSS-Tricks mit Padding überarbeitet werden müssen:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

Beachten Sie, dass diese Lösung Fußzeilen mit flexiblen Höhen ermöglicht. Dies ist besonders praktisch, wenn Sie Seiten für mehrere Bildschirmgrößen entwerfen und den Inhalt beim Verkleinern umbrechen.

Warum das so ist

  • style="height:100%;"Das <html>Tag nimmt den gesamten Platz des Dokuments ein.
  • Klasse d-flexsetzt display:flexauf unser <body>Tag.
  • Klasse flex-columnsetzt flex-direction:columnauf unser <body>Tag. Seine Kinder ( <header>, <main>,<footer> und andere direkte Kind) werden jetzt vertikal ausgerichtet.
  • Klasse h-100setzt height:100%auf unser <body>Tag, was bedeutet, dass es den gesamten Bildschirm vertikal abdeckt.
  • Die Klasse flex-grow-1setzt flex-grow:1auf unsere <main>und weist sie effektiv an, den verbleibenden vertikalen Raum zu füllen. Dies entspricht der vertikalen Höhe von 100%, die wir zuvor für unser <body>Tag festgelegt haben.

Arbeitsdemo hier: https://codepen.io/maxencemaire/pen/VwvyRQB

Weitere Informationen zur Flexbox finden Sie unter https://css-tricks.com/snippets/css/a-guide-to-flexbox/ .

— Kathandrax
quelle
h-100Klasse funktioniert nicht richtig, es ist besser zu verwenden min-vh-100.
— ikonuk
@ikonuk Was genau meinst du mit "funktioniert nicht richtig"? Bitte erläutern Sie.
— Kathandrax
Weil die h-100Klasse immer von der Höhe der übergeordneten Elemente abhängt und in einigen Fällen möglicherweise nicht richtig funktioniert. Da wir eine Fußzeile am unteren Rand des Ansichtsfensters wünschen, empfiehlt es sich, die Höhe des Ansichtsfensters zu verwenden.
— ikonuk
Definieren Sie erneut "einige Fälle". Ihr Argument über die übergeordnete Abhängigkeit gilt genauso für min-width. Aus diesem Grund enthält das HTMLTag height100% im Code. Das Beispiel funktioniert und ich verstehe nicht, warum es die browserübergreifende Unterstützung für die CSS- heightEigenschaft nicht geben würde , in die das Bootstrap-Snippet letztendlich übersetzt wird.
— Kathandrax
Ich habe nicht gesagt, dass Ihr Beispiel nicht funktioniert. Nicht jeder verwendet den Stil im HTMLTag. In meinem Fall hat Ihre Lösung nicht funktioniert, da ich den Stil im HTMLTag nicht bevorzuge . Und ich möchte nicht, dass das bodyTag von einem anderen Elternteil abhängt, sondern von einem Ansichtsfenster. Sie müssen nicht setzen style="height:100%;"und h-100gleichzeitig. Das Anbringen min-vh-100am Körper erledigt einfach den Job und weniger Code.
— Ikonuk
0

Es sieht so aus, als würde die height:100%'Kette' gebrochen div#main. Versuchen Sie es zu ergänzen height:100%, und das könnte Sie Ihrem Ziel näher bringen.

— Gehirne911
quelle
0

Hier finden Sie den Ansatz in HAML ( http://haml.info ) mit Navigationsleiste 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
— Hannes
quelle
Könnten Sie Ihre Antwort etwas näher erläutern? Nur-Code-Antworten werden im Allgemeinen nicht empfohlen.
— Qix - MONICA wurde am
1
Okay, was willst du wissen?
— Hannes
Ich muss es nicht wissen, aber jemand, der später auf diese Site kommt, weiß möglicherweise nicht genau, warum der Code Ihrer Antwort das tut, was er tut.
— Qix - MONICA wurde am
Wahrscheinlich sollte ich es löschen. Ich habe ein neues Intro geschrieben. :)
— Hannes
0

Halte es einfach.

footer {
  bottom: 0;
  position: absolute;
}

Möglicherweise müssen Sie auch die Höhe der Fußzeile versetzen, indem Sie der Fußzeile ein margin-bottomÄquivalent zur Fußzeilenhöhe hinzufügen body.

— obfk
quelle
0

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

— Sieger
quelle
0

Eine weitere mögliche Lösung, bei der nur Medienabfragen verwendet werden

@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;
    }
}
— GeorgeWL
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.