Ich hatte die folgende Seite (Deadlink :) http://www.workingstorage.com/Sample.htm
mit 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.
flexbox
.Antworten:
Eine einfache Methode besteht darin, den Text
100%
Ihrer Seite mit einemmin-height
von zu100%
erstellen. Dies funktioniert einwandfrei, wenn sich die Höhe Ihrer Fußzeile nicht ändert.Geben Sie der Fußzeile einen negativen Rand oben:
quelle
box-sizing: border-box;
für den Körper [und den#container
] erforderlich sein .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:
Bei der folgenden Methode wird ein "Trick" verwendet, indem ein
::after
Pseudoelement auf dem platziertbody
und so eingestellt wird, dass es genau die Höhe der Fußzeile hat, sodass es genau den Platzabsolute
einnimmt, 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)Tabellenlayout-Methode:
quelle
display: table
display: table-row
display:table-cell
. Ich musste jedoch etwas hinzufügenbody {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 height
aber ich spezifiziere meins in Rem nicht px, so dass es problematisch wird.flexbox
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
quelle
Ich habe dies verwendet, um meine Fußzeile nach unten zu kleben, und es hat bei mir funktioniert:
HTML
Dies ist die einzige Änderung, die Sie im HTML vornehmen müssen. Fügen Sie diese
div
mit 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
Die
"allButFooter"
Klasse hat einenmin-height
Wert, der von der Höhe des Ansichtsfensters (100vh
dh 100% der Höhe des Ansichtsfensters) und der Höhe der Fußzeile abhängt, von der ich bereits wusste, dass sie es ist40px
.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: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.
quelle
display: none
Danke variiert, was im Körper angezeigt wird . Es ist auch schön und einfach.position: fixed; bottom: 0
und das hier. Diese Lösung ist die beste, da die Fußzeile nicht am unteren Rand haftet, sondern am Ende der scrollbaren Seite bleibt..footer {max-height: calc(100vh+40px); position: absolute}
. Da es auch funktioniert, sollten Sie nur Ihre Körpergröße kennen.Ab IE7 können Sie einfach verwenden
Sehen Unterstützung finden caniuse .
quelle
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
quelle
Eine weitere wirklich einfache Lösung ist diese:
jsFiddle
Der Trick besteht darin, a
display:table
für das gesamte Dokument unddisplay:table-row
mit zu verwendenheight:0
für die Fußzeile zu verwenden.Da die Fußzeile das einzige
table-row
untergeordnete Element ist, das als angezeigt wird , wird sie am unteren Rand der Seite gerendert.quelle
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 ???Eine sehr einfache Flex-Lösung, die keine festen Höhen oder Positionsänderungen von Elementen voraussetzt.
HTML
CSS
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
quelle
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:
mit
quelle
Mach das
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
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.
quelle
flex-grow: 1
etwas über der Fußzeile verwenden, bleibt die Fußzeile unten richtig.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.
Ich gehe von einem
column
Verhalten für unsere App aus, falls Sie einen Header, einen Helden oder einen vertikal ausgerichteten Inhalt hinzufügen müssen.Sie können hier https://codepen.io/anon/pen/xmGZQL damit spielen
quelle
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.
Quelle für diesen Code
quelle
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.
quelle
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:
quelle
So habe ich das gleiche Problem gelöst
quelle
Das funktioniert gut
quelle
Passen Sie einfach den Fußzeilenbereich an
quelle
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.
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.
quelle
Dynamischer Einzeiler mit jQuery
Alle CSS-Methoden, auf die ich gestoßen bin, sind zu starr. Das Einstellen der Fußzeile auf
fixed
ist ebenfalls keine Option, wenn dies nicht Teil des Designs ist.Getestet am:
Angenommen, dieses Layout:
Verwenden Sie die folgende jQuery-Funktion:
Dadurch wird das
min-height
für#content
auf 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#content
Höhe die Fensterhöhe überschreitet , erheblich und hat keine Auswirkungen, da sie nicht benötigt wird.Sehen Sie es in Aktion:
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:
quelle
Du kannst das
quelle
Setzen Sie einfach den HTML-Code, den Textkörper und die anderen Zeilen mit Ausnahme der Fußzeile auf 100%. z.B
das css wird
quelle
quelle
Was ist damit:
quelle
Ich habe in meinen vielen Projekten verwendet und nie eine einzige Ausgabe bekommen :)
Als Referenz sind Code in Snippet
quelle