CSS, damit die Fußzeile der HTML-Seite mit einer Mindesthöhe am unteren Rand der Seite bleibt, die Seite jedoch nicht überlappt

379

Ich hatte die folgende Seite (Deadlink :) http://www.workingstorage.com/Sample.htmmit einer Fußzeile, die ich nicht am Ende der Seite platzieren kann.

Ich möchte, dass die Fußzeile

  • bleiben Sie am unteren Fensterrand, wenn die Seite kurz ist und der Bildschirm nicht ausgefüllt ist, und
  • Bleiben Sie am Ende des Dokuments und bewegen Sie sich wie gewohnt nach unten, wenn mehr als ein Bildschirm voller Inhalte vorhanden ist (anstatt den Inhalt zu überlappen).

Das CSS ist vererbt und verwirrt mich; Ich kann es anscheinend nicht richtig ändern, um eine Mindesthöhe für den Inhalt festzulegen oder die Fußzeile nach unten zu verschieben.

css  footer 
— Caveatrob
quelle
16
Es ist erstaunlich, dass dies ein so häufiges Problem ist. Vielleicht sehen wir in CSS4 Implementierungen von "make a nav bar" und "make a footer", da diese so häufig versucht werden.
— Isomorphismen
1
Es wird niemals CSS4 geben (CSS3 wird nur wachsen). Ich denke, dies wird mit der Implementierung von behoben flexbox.
— Marijke Luttekes
1
Ausgezeichneter Artikel dazu: css-tricks.com/couple-takes-sticky-footer
— Phil
— Lalit Baghel

Antworten:

345

Eine einfache Methode besteht darin, den Text 100%Ihrer Seite mit einem min-heightvon zu 100%erstellen. Dies funktioniert einwandfrei, wenn sich die Höhe Ihrer Fußzeile nicht ändert.

Geben Sie der Fußzeile einen negativen Rand oben:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
— Jon Winstanley
quelle
27
Dies funktioniert nur, wenn Sie die Höhe Ihrer Fußzeile im Voraus kennen. Manchmal haben Fußzeilen dynamischen Inhalt oder Sie erstellen ein Framework. Irgendwelche Ideen für Fußzeilen mit variabler Höhe?
— Costa
@Costa Überprüfen Sie meine Antwort hier , um eine Lösung zu finden, die mit Fußzeilen mit variabler Höhe funktioniert.
— Jose Rui Santos
Bei dynamischen Inhalten lassen Sie einfach die "Höhe" weg und die Fußzeile passt sich dem Inhalt an. Nicht in allen Browsern getestet
— m47730
Dies kann box-sizing: border-box;für den Körper [und den #container] erforderlich sein .
— konsolebox
Dies scheint eine Menge seltsamer Tricks zu sein. Es gibt Antworten, die einfach sind und keine Tricks verwenden.
— Andrew Koster
165

Ich habe eine recht einfache Methode entwickelt, um die Fußzeile unten zu kleben, aber wie bei den meisten gängigen Methoden müssen Sie sie an die Höhe Ihrer Fußzeile anpassen.

DEMO ANZEIGEN

Flexbox-Methode:

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Erweitern Sie das Snippet

Bei der folgenden Methode wird ein "Trick" verwendet, indem ein ::afterPseudoelement auf dem platziert bodyund so eingestellt wird, dass es genau die Höhe der Fußzeile hat, sodass es genau den Platz absoluteeinnimmt, den die Fußzeile einnimmt. Wenn also die Fußzeile darüber positioniert ist, Es scheint, als würde die Fußzeile wirklich Platz beanspruchen und die negativen Auswirkungen ihrer absoluten Positionierung beseitigen (z. B. den Inhalt des Körpers durchgehen).

position:absolute Methode: (erlaubt keine dynamische Fußzeilenhöhe)

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Erweitern Sie das Snippet

Tabellenlayout-Methode:

html,body { height: 100%;  margin: 0; }

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
Erweitern Sie das Snippet

— vsync
quelle
Einfach und elegant und vor allem funktioniert es. Andere Lösungen schlagen fehl, wenn Sie mit dem Hinzufügen von divs beginnen display: table display: table-row display:table-cell. Ich musste jedoch etwas hinzufügen body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}, um eine Bildlaufleiste zu vermeiden. Sie könnten dies berücksichtigen, indem Sie das anpassen, body:after heightaber ich spezifiziere meins in Rem nicht px, so dass es problematisch wird.
— Steve Waring
3
@SteveWaring - Danke. Diese Antwort wurde aktualisiert, da sie ziemlich alt war. Jetzt bin ich für die Verwendung vonflexbox
— vsync
1
Das CSS unter "Basic Common Markup" hatte einen kleinen Fehler, der dazu führte, dass es nicht funktionierte (der Fehler war in der verknüpften "DEMO" nicht vorhanden, was in Ordnung ist). Ich habe mir erlaubt, es zu reparieren.
— Sleske
3
VIELEN DANK! Die Flexbox-Lösung ist eigentlich einfach und verwendet keine Hacks oder seltsamen festen Größen oder festen Positionen.
— Andrew Koster
1
Diese Demo ist die einzige, die funktioniert! Fantastisch, danke!
— Drakinite
51

Ein sehr einfacher Ansatz, der hervorragend für alle Browser geeignet ist, ist folgender:

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>
Erweitern Sie das Snippet

— Tamás Pap
quelle
34

Ich habe dies verwendet, um meine Fußzeile nach unten zu kleben, und es hat bei mir funktioniert:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

Dies ist die einzige Änderung, die Sie im HTML vornehmen müssen. Fügen Sie diese divmit der "allButFooter"Klasse hinzu. Ich habe es mit allen Seiten gemacht, die so kurz waren, dass ich wusste, dass die Fußzeile nicht unten bleiben würde, und auch Seiten, die lang genug waren, dass ich bereits wusste, dass ich scrollen musste. Ich habe dies getan, damit ich sehen konnte, dass es in Ordnung funktioniert, wenn der Inhalt einer Seite dynamisch ist.

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

Die "allButFooter"Klasse hat einen min-heightWert, der von der Höhe des Ansichtsfensters ( 100vhdh 100% der Höhe des Ansichtsfensters) und der Höhe der Fußzeile abhängt, von der ich bereits wusste, dass sie es ist 40px.

Das ist alles was ich getan habe und es hat perfekt für mich funktioniert. Ich habe es nicht in jedem Browser versucht, nur in Firefox, Chrome und Edge, und die Ergebnisse waren so, wie ich es wollte. Die Fußzeile bleibt unten und Sie müssen sich nicht mit dem Z-Index, der Position oder anderen Eigenschaften herumschlagen. Die Position jedes Elements in meinem Dokument war die Standardposition. Ich habe sie nicht in absolut oder fest oder so geändert.

Arbeiten mit Responsive Design

Hier ist etwas, das ich klären möchte. Diese Lösung mit derselben Fußzeile, die 40 Pixel hoch war, funktionierte nicht wie erwartet, als ich in einem reaktionsschnellen Design mit arbeitete Twitter-Bootstrap. Ich musste den Wert ändern, den ich in der Funktion subtrahierte:

.allButFooter {
    min-height: calc(100vh - 95px); 
}

Dies liegt wahrscheinlich daran Twitter-Bootstrap, dass es eigene Ränder und Auffüllungen gibt. Deshalb musste ich diesen Wert anpassen.

Ich hoffe, das ist für euch von Nutzen! Zumindest ist dies eine einfache Lösung, bei der keine großen Änderungen am gesamten Dokument vorgenommen werden müssen.

— N. Larrieux
quelle
Ich habe Probleme mit allen möglichen Lösungen für dieses Problem. Diese Lösung funktioniert mit meiner Seite, die mithilfe von display: noneDanke variiert, was im Körper angezeigt wird . Es ist auch schön und einfach.
— Steve Waring
nach vielen stunden des lösungsversuchs arbeiteten nur zwei nl. position: fixed; bottom: 0und das hier. Diese Lösung ist die beste, da die Fußzeile nicht am unteren Rand haftet, sondern am Ende der scrollbaren Seite bleibt.
— Hmerman6006
Um auf Ihrer Antwort aufzubauen, können Sie sie anders betrachten, indem Sie die Option Einstellen .footer {max-height: calc(100vh+40px); position: absolute}. Da es auch funktioniert, sollten Sie nur Ihre Körpergröße kennen.
— Hmerman6006
29

Ab IE7 können Sie einfach verwenden

#footer {
    position:fixed;
    bottom:0;
}

Sehen Unterstützung finden caniuse .

— Liam
quelle
77
Ich möchte nicht, dass die Fußzeile unten angezeigt wird, wenn sich Inhalte außerhalb der Fußzeile befinden. Ich möchte, dass die Fußzeile unten bleibt, wenn nicht genug vorhanden ist, und sich dann wie gewohnt nach unten ausdehnt, wenn mehr als ein Bildschirm vorhanden ist. Die klebrige Fußzeile löste dies.
— Caveatrob
@Caveatrob: Ich habe mir erlaubt, diese wichtigen Informationen in Ihre Frage aufzunehmen, um Missverständnisse zu vermeiden (für zukünftige Leser haben Sie dies vermutlich inzwischen gelöst :-)).
— Sleske
Diese Lösung ist die einzige, die die Fußzeile auf jede Seite druckt, und sie ist so einfach! Aber ich kann es nicht zum Laufen bringen, dass sich der Inhalt nicht mit dem Hauptinhalt überschneidet. Hat jemand eine Lösung dafür?
— Hatzen
15

Eine einfache Lösung, die ich benutze, funktioniert ab IE8 +

Geben Sie die Mindesthöhe an: 100% in HTML, damit bei geringerem Inhalt die Standbildseite die volle Höhe des Ansichtsfensters einnimmt und die Fußzeile am unteren Rand der Seite angezeigt wird. Wenn der Inhalt zunimmt, verschiebt sich die Fußzeile mit dem Inhalt nach unten und bleibt auf dem Boden.

JS Fiddle Working Demo: http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
— Sanjeev
quelle
es ist gut ... aber nur Update .pageContentWrapper {padding-bottom: 100px; / * Höhe der Fußzeile * /}
— Subodh Sharma
Vielen Dank. Arbeiten an Angular 7
— Carlos Torres
Ich möchte keine unnötige Bildlaufleiste erstellen, wenn dies möglich ist.
— 25онстантин Ван
14

Eine weitere wirklich einfache Lösung ist diese:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

Der Trick besteht darin, a display:tablefür das gesamte Dokument und display:table-rowmit zu verwendenheight:0 für die Fußzeile zu verwenden.

Da die Fußzeile das einzige table-rowuntergeordnete Element ist, das als angezeigt wird , wird sie am unteren Rand der Seite gerendert.

— Jose Rui Santos
quelle
Ich liebe CSS-Tabellen, aber sie verursachen Probleme auf der ganzen
— Costa
1
Diese Lösung scheint nicht vollständig zu funktionieren - Firefox ignoriert die Fußzeilenhöhe 0. Ich habe stattdessen die Höhe 1px oder sogar 1% verwendet. Edge, IE11, Chrome und Mobile Safari sind mit 0 zufrieden.
— Kitet
Ich liebe diese Lösung wirklich. Aber wenn ich mein Layout so erstelle, wird die Browserberechnung der untergeordneten Elemente verschlechtert. Angenommen, wir möchten einen Container oben auf der Seite haben und er muss height: 100%dann tatsächlich 100% betragen, wenn das Verhältnis des Ansichtsfensters 1/1 (Quadrat) beträgt. Wenn das Ansichtsfenster breiter (Querformat) wird, beträgt die Höhe mehr als 100% und wenn es schmaler (Hochformat) ist, weniger als 100%. Die Höhe ist also proportional zur Breite des Fensters. Versucht, es mit einem anderen Wrapper zu lösen, aber das hat nicht funktioniert. Jemand hat eine Lösung oder zumindest einen Hinweis ???
— Axel
@Axel In dieser Version habe ich oben ein blaues Div mit 100% Höhe hinzugefügt, das die gesamte Höhe (abzüglich der Fußzeilenhöhe) einnimmt, unabhängig von der Breite des Ansichtsfensters. Ich denke, Sie könnten andere CSS-Probleme haben. Versuchen Sie, eine minimierte Version Ihres Problems basierend auf meiner ursprünglichen jsFiddle
— Jose Rui Santos
— Axel
8

Eine sehr einfache Flex-Lösung, die keine festen Höhen oder Positionsänderungen von Elementen voraussetzt.

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

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

main {
  flex: 1;
}

Browser-Unterstützung

Alle gängigen Browser außer IE11 und niedriger.

Stellen Sie sicher, dass Sie Autoprefixer für die entsprechenden Präfixe verwenden.

Code-Snippet anzeigen

— m.spyratos
quelle
Lief wie am Schnürchen! Selbst für Res mehr als 4k Fußzeilensticks am unteren Rand
— Arpan Banerjee
7

Eine Sache, vor der man sich hüten sollte, sind mobile Geräte, da sie die Idee des Ansichtsfensters auf "ungewöhnliche" Weise umsetzen:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

Als solches mit position: fixed; (wie ich an anderen Orten empfohlen gesehen habe) normalerweise nicht der richtige Weg. Natürlich hängt es von dem genauen Verhalten ab, nach dem Sie suchen.

Was ich verwendet habe und auf Desktop und Mobile gut funktioniert habe, ist:

<body>
    <div id="footer"></div>
</body>

mit

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}
— Ben Jackson
quelle
6

Mach das

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

Sie können auch über Flex lesen, das von allen modernen Browsern unterstützt wird

Update : Ich habe über Flex gelesen und es ausprobiert. Es hat bei mir funktioniert. Hoffe, es tut das gleiche für Sie. Hier ist, wie ich implementiert habe. Hier ist nicht die ID, sondern die Div

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

main {
    display: block;
    flex: 1 0 auto;
}

Hier können Sie mehr über Flex lesen https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Denken Sie daran, dass es von älteren IE-Versionen nicht unterstützt wird.

— Aarth Tandel
quelle
1
Dies ist die beste Antwort in der Praxis. Wenn Sie flex-grow: 1etwas über der Fußzeile verwenden, bleibt die Fußzeile unten richtig.
— iBug
5

Ich habe hier als ähnliche Frage geantwortet:

Positionieren Sie die Fußzeile unten auf der Seite mit der festen Kopfzeile

Ich bin ziemlich neu in der Webentwicklung und ich weiß, dass dies bereits beantwortet wurde, aber dies ist der einfachste Weg, den ich gefunden habe, um es zu lösen, und ich denke, dass es irgendwie anders ist. Ich wollte etwas Flexibles, weil die Fußzeile meiner Web-App eine dynamische Höhe hat. Am Ende habe ich FlexBox und einen Abstandshalter verwendet.

  1. Stellen Sie zunächst die Höhe für Ihr HTML und Ihren Körper ein
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

Ich gehe von einem columnVerhalten für unsere App aus, falls Sie einen Header, einen Helden oder einen vertikal ausgerichteten Inhalt hinzufügen müssen.

  1. Erstellen Sie die Spacer-Klasse
.spacer {
    flex: 1; 
}
  1. So könnte Ihr HTML später so etwas sein 
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

Sie können hier https://codepen.io/anon/pen/xmGZQL damit spielen

— Camo
quelle
5

Dies ist als klebrige Fußzeile bekannt. Eine Google-Suche danach bringt viele Ergebnisse. Eine CSS Sticky Footer habe ich erfolgreich verwendet. Aber es gibt noch mehr.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>
Erweitern Sie das Snippet

Quelle für diesen Code

— Paolo Bergantino
quelle
3

Bei meiner jquery-Methode wird die Fußzeile am Ende der Seite platziert, wenn der Seiteninhalt kleiner als die Fensterhöhe ist, oder die Fußzeile wird einfach nach dem Inhalt eingefügt, andernfalls:

Wenn Sie den Code in einem eigenen Gehäuse aufbewahren, bevor anderer Code verwendet wird, verringert sich auch die Zeit, die zum Neupositionieren der Fußzeile erforderlich ist.

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
— Sam Jones
quelle
3

Ich habe mich selbst mit diesem Problem befasst. Ich habe einige Lösungen gesehen und jede hatte Probleme, oft mit magischen Zahlen.

Unter Verwendung von Best Practices aus verschiedenen Quellen habe ich diese Lösung gefunden:

http://jsfiddle.net/vfSM3/248/

Das, was ich hier speziell erreichen wollte, war, den Hauptinhalt dazu zu bringen, zwischen Fußzeile und Kopfzeile innerhalb des grünen Bereichs zu scrollen.

Hier ist eine einfache CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}
— husayt
quelle
3
Ich hasse Websites, die so gestaltet sind. Warum möchten Sie die Textmenge einschränken, die ich gleichzeitig lesen kann? Ich muss die Kopf- und Fußzeile nicht die ganze Zeit sehen, ich weiß, wo ich sie finden kann, wenn ich sie will.
— Tarmil
1
@Tarmil einen Blick auf haben numerics.info . Sehen Sie jetzt, wann dies nützlich sein könnte?
— Husayt
3

So habe ich das gleiche Problem gelöst

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
Erweitern Sie das Snippet

— Nemus
quelle
2

Passen Sie einfach den Fußzeilenbereich an

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>
— Hautausschläge
quelle
Funktioniert nicht. Es bleibt immer unten, auch wenn wir eine sehr große Seite haben. Es kann nicht mit allen Seiten scrollen, sondern bleibt einfach unten.
— fWd82
Funktioniert nicht Die Fußzeile kommt über den Inhalt.
— Indolentdeveloper
1

Hier sind meine zwei Cent. Im Vergleich zu anderen Lösungen müssen keine zusätzlichen Behälter hinzugefügt werden. Daher ist diese Lösung etwas eleganter. Unter dem Codebeispiel werde ich erklären, warum dies funktioniert.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

Das erste, was wir tun, ist, den größten Container (HTML) zu 100% herzustellen. Die HTML-Seite ist so groß wie die Seite selbst. Als nächstes legen wir die Körpergröße fest, sie kann größer sein als 100% des HTML-Tags, aber sie sollte mindestens so groß sein, daher verwenden wir eine Mindestgröße von 100%.

Wir machen den Körper auch relativ. Relativ bedeutet, dass Sie das Blockelement relativ von seiner ursprünglichen Position verschieben können. Das verwenden wir hier allerdings nicht. Weil Verwandte eine zweite Verwendung haben. Jedes absolute Element ist entweder absolut für die Wurzel (HTML) oder für den ersten relativen Elternteil / Großelternteil. Das ist es, was wir wollen, wir wollen, dass die Fußzeile absolut ist, relativ zum Körper, nämlich zum Boden.

Der letzte Schritt besteht darin, die Fußzeile auf absolut und unten zu setzen: 0, wodurch sie an den unteren Rand des ersten Elternteils / Großelternteils verschoben wird, der relativ ist (natürlich).

Jetzt müssen wir noch ein Problem beheben. Wenn wir die gesamte Seite ausfüllen, wird der Inhalt unter der Fußzeile angezeigt. Warum? Nun, weil sich die Fußzeile nicht mehr im "HTML-Fluss" befindet, weil sie absolut ist. Wie beheben wir das? Wir werden dem Körper Polsterung hinzufügen. Dies stellt sicher, dass der Körper tatsächlich größer ist als er zufrieden ist.

Ich hoffe, ich habe euch viel klar gemacht.

— David
quelle
1

Dynamischer Einzeiler mit jQuery

Alle CSS-Methoden, auf die ich gestoßen bin, sind zu starr. Das Einstellen der Fußzeile auf fixedist ebenfalls keine Option, wenn dies nicht Teil des Designs ist.

Getestet am:

  • Chrome: 60
  • FF: 54
  • IE: 11

Angenommen, dieses Layout:

<html>

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

</html>

Verwenden Sie die folgende jQuery-Funktion:

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

Dadurch wird das min-heightfür #contentauf die Fensterhöhe eingestellt - die Höhe der Fußzeile, wie auch immer dies zu diesem Zeitpunkt sein mag.

Da wir verwendet haben min-height, verschlechtert sich die Funktion , wenn die #contentHöhe die Fensterhöhe überschreitet , erheblich und hat keine Auswirkungen, da sie nicht benötigt wird.

Sehen Sie es in Aktion:

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
Erweitern Sie das Snippet

Gleiches Snippet auf JsFiddle

Bonus:

Wir können dies weiterentwickeln und diese Funktion so anpassen, dass sie sich an die Größe der dynamischen Betrachterhöhe anpasst:

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
Erweitern Sie das Snippet

— Ich habe Kode
quelle
1

Du kannst das

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}
— Abdallah Abdillah
quelle
0

Setzen Sie einfach den HTML-Code, den Textkörper und die anderen Zeilen mit Ausnahme der Fußzeile auf 100%. z.B

<body>
<header></header>
<content></content>
<footer></footer>

das css wird 

html, body, header, content{
height:100%;
}
— Olatunde G.
quelle
0 
<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
— San Jaisy
quelle
0

Was ist damit:

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>
— novecentonove
quelle
Während dieser Code die Frage möglicherweise beantwortet, verbessert die Bereitstellung eines zusätzlichen Kontexts darüber, warum und / oder wie dieser Code die Frage beantwortet, ihren langfristigen Wert.
— β.εηοιτ.βε
-1

Ich habe in meinen vielen Projekten verwendet und nie eine einzige Ausgabe bekommen :)

Als Referenz sind Code in Snippet 

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>
Erweitern Sie das Snippet

— Santosh Khalse
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.