Funktioniert großartig, wenn Sie eine feste Höhe für den Footer festlegen können.
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>* {
margin: 0;
}
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;
}Siehe den Pen Sticky Footer von Chris Coyier (@chriscoyier) auf CodePen.
Beachten Sie, dass dieser Clearfix der einzige ist, bei dem ein Punkt (content: “.”;) anstelle eines Leerzeichens wie im Snippet „Force Element To Self-Clear it’s Children“ verwendet wird.
Helbrand
Danke für die Erklärung! Ich habe wirklich Schwierigkeiten, die Nuancen (wie „Punkt“ und „Leerzeichen“) zu verstehen, wie sie nicht nur reaktiv, sondern auch pro-Design angewendet werden können.
Danke dafür. Ich bevorzuge es, durch Ausprobieren zu lernen, anstatt zuerst zu lesen. Ich habe diesen Footer-Ansatz lange versucht und dann erfahren, dass eine Möglichkeit, die Position des Footers bei „Hinzufügen von Inhalten“ zu ändern, darin besteht, dem Body-Tag 100 % zuzuweisen und dann nur die Höhe in Prozent für andere Geschwister des Footers festzulegen. Es hat lange gedauert. Ich würde Sie umarmen, wenn ich in Ihrer Nähe wäre.
Sehr ordentlich, das werde ich in meinen Code einbauen.
Beachten Sie, dass die Einstellung html {height:100%} einen Fehler verursacht, bei dem ein unten ausgerichtetes Hintergrundbild des Bodys nicht am realen unteren Rand des Bodys angebracht wird.
Stattdessen wird es am unteren Rand des Ansichtsfensters angebracht und scrollt nach oben, was einen hässlichen Abstand darunter zeigt.
Die Lösung besteht darin, den Hintergrund auf ein inneres Element anzuwenden oder vielleicht funktioniert Ihr Design stattdessen mit background-attachment:fixed.
Ein weiteres brillantes Code-Stück von Ihnen, Chris, danke
Beachten Sie, dass der Sticky Footer in Opera und IE8 kurz kommt. Öffnen Sie die Seite in beiden, haben Sie Ihr Browserfenster halb geöffnet, ziehen Sie das Fenster nach unten und sehen Sie, dass der Footer nicht folgt. Dieser hier funktioniert in allen…
Chad, dieser Link öffnet GoDaddy und keinen Sticky Footer…
Tatsächlich öffnete dieser Link einen schmuddeligen Chatroom für mich. Ich bin da sehr schnell wieder raus. Bitte entfernen oder reparieren Sie den Link.
Link entfernt, Thread begraben.
Was ist der Code, den Sie für das Hauptmenü der Snippets verwendet haben?
CSS
HTML
HTAccess
Etc.
Eine Demo wäre besser gewesen.
Es gibt jetzt eine Demo.
@iTechRoom
Ich versuche, den Footer meines WordPress.com-Blogs zu entfernen, und frage mich, ob es eine Möglichkeit gibt, dies zu tun, ohne die CSS-Erweiterung kaufen zu müssen, und wenn ja, wie die Codes lauten würden. Ich bin neu in der ganzen WordPress-Sache und weiß fast nichts über das Programmieren. Bitte helfen Sie!
den PHP-Aufruf zum Abrufen des Footers entfernen?
Entfernen Sie diese Zeile am Ende Ihrer index.php oder pages.php (usw.).
PHP wird nicht angezeigt.
Hier ist sie wieder. Habe die „“ am Ende entfernt.
?php get_footer(); ?
Wofür ist das denn gut?
body (&rt;'s) #wrap {height: auto; min-height: 100%;}
Ich habe DIESE Tricks für mein Projekt verwendet, sie sind sehr nützlich für mich.
Ich bin ein B.C.A. Student in Gujarat AUS Indien
Danke CSS-tricks
Ich komme auch aus Indien. Jedes Mal, wenn jemand ohne gute Grammatik kommentiert, gehe ich davon aus, dass er aus Indien kommt. Bitte versuchen Sie, gutes Englisch zu lernen. Als Programmierer oder auch als jemand, der einen Computer benutzt, wird Ihnen das in Zukunft definitiv helfen.
Ich benutze so etwas schon seit Jahren.
Gibt es dafür inzwischen einen besseren Weg mit CSS3?
Das ist es, was ich gesucht habe… danke
Hallo,
Danke für den Code, aber ich habe ein Problem mit Firefox (Mac-OSX).
Hat jemand das gleiche Problem?
OPS! Ich habe mich geirrt… es gab einen Kommentar im HTML-Code, der in Firefox störte, ich habe ihn gelöscht, jetzt ist es in Ordnung.
Vielen Dank, toller Artikel!!
Danke! Es hat gut auf meiner Projektwebsite funktioniert.
Tolles Snippet. Ich werde das ständig verwenden.
Aber ich hatte ein Problem mit großen Hintergrundbildern auf dem Body, die beim Scrollen weiter unten auf der Seite verschwanden.
Lösung
fügen Sie overflow: auto zur zweiten Zeile im CSS hinzu.
html, body, #wrap {
height: 100%;
overflow: auto;
}
@Michael Ware: Das funktioniert super! Ich hatte ein einfaches Sticky-Footer-Setup, ein wiederholendes Hintergrundbild im <HTML>-Element und ein festes Hintergrundbild in meinem <BODY>-Element. Ich hatte das gleiche Problem/Bug, dass das <BODY>-Hintergrundbild am unteren Rand des Browserfensters abgeschnitten wurde. Das Hinzufügen von „overflow: auto“ zum <BODY>-Element hat diesen Bug behoben, aber wissen Sie, ob es (und keine anderen Probleme verursacht) in anderen Browsern funktioniert?
Funktioniert perfekt mit dem Overflow, für mich. Gracias
Großartiger Beitrag! Aber…
Ich habe versucht, ihn auf meiner eigenen Website zu implementieren, aber es scheint, dass der negative Randwert bei mir nicht funktioniert. Obwohl der Inhalt nicht sehr hoch ist.
Er positioniert meinen Footer genau „um die Höhe meines Footers“ unter dem Ansichtsfenster.
Könnte mir jemand helfen? Das wäre sehr dankbar!
Cheers Sam
Der einfachste und kompatibelste Sticky Footer, den ich kenne, ist Ryan Fait’s Sticky Footer. Es ist lange her, seit ich ihn gefunden habe, weiß jemand, ob er Probleme hat? Ich bin bisher auf nichts gestoßen.
Das ist dasselbe wie hier, nur dass dieses eine Pseudo-Element verwendet, anstatt etwas in Ihr Markup aufnehmen zu müssen.
Die meisten Websites brauchen keinen Sticky Footer, da alle Seiten höher als ein Bildschirm sind. Immer.
Nein.
Damit hast du komplett Unrecht, Kumpel.
Hallo zusammen,
Ich habe versucht, ein Megamenü in den Header einzubauen, ohne Erfolg. Es scheint die Fähigkeit zu beeinträchtigen, dass der Footer mehr richtig schwebt. Irgendwelche Vorschläge?
Hallo Leute,
Wie bekomme ich das in HTML5 zum Laufen, würde das nicht mit dem CSS des Boilerplates kollidieren? Oder würde ich den Code nur im Autorenbereich einfügen?
Ich habe mir selbst geantwortet… Genial, die Jungs haben an alles gedacht, ich ziehe meinen Hut vor Paul Irish und dem Rest des Teams.
Ich mag diesen wirklich sehr!
Ich bin mir nicht ganz sicher, aber ich glaube, dass
#wrap margin-bottom mit dem Wert der Höhe von #footer haben sollte :S
Danke, aber ich habe Probleme in Firefox mit diesem Snippet :/
Variablenhöhe Sticky Footer: http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
Sieht vielversprechend aus. Hat das jemand getestet?
Ich teste es mit einem Layout, das mehr oder weniger so aussieht
PseudocodeWahrscheinlich nicht das beste Layout, aber hoffentlich genug, um mir den Einstieg zu erleichtern. Außerdem muss ich überlegen, wie ich es zumindest in den neueren IE10 gut aussehen lasse, zum Beispiel unter Verwendung dieser Tabelle, wer CSS Flexbox unterstützt: http://caniuse.com/flexbox
Das ist großartig, definitiv eine vereinfachte Version dessen, was Matthew James Taylor entwickelt hat. Danke fürs Teilen.
Hallo, ich habe einen Bug mit dieser Methode in Google Chrome (Windows), obwohl es nur mein Computer sein könnte. Wenn ich das Fenster so weit verkleinere, bis eine Scrollleiste erscheint, die Seite aktualisiere und dann maximiere, springt der Footer zum Ende des Inhalts. Dieser Bug tritt auf cssstickyfooter.com und überall sonst, wo diese Methode verwendet wird. Irgendwelche Ideen für eine Lösung?
Es tut mir leid, aber das hat bei mir nicht funktioniert… Ich musste meinem Footer position:fixed und bottom:0 geben, damit es funktioniert, ohne den hier angegebenen Code. Vielleicht liegt es aber auch daran, dass ich es in DotNetNuke versucht habe. Funktioniert mit voreingestellten Stilen und so etwas anders. Aber hey, das hat mich in Gang gebracht, also trotzdem danke ;D
Ja!!! Taarique Debidin, du bist mein Mann!
Ich benutze es in einem ziemlich komplexen System und hatte das gleiche Problem.
Das Setzen von position:fixed und bottom:0 auf den Footer war letztendlich alles, was ich tun musste.
Danke für diese Lösung! Mein Footer war ziemlich hartnäckig.
Ich wende die Technik des Sticky Footers auf meiner Website an, aber mein Inhalt muss sowohl horizontal als auch vertikal im #main ausgerichtet sein. Aber aufgrund des „botom padding-bottom: 180px“, wenn dies die gleiche Größe wie der Footer haben muss, richtet sich mein #main nicht vertikal aus. Wenn ich diese Polsterung entferne und dem #main eine Höhe gebe, funktioniert es!, aber mein Footer ist nicht immer unten. Wie soll ich in diesem Fall vorgehen? Ich brauche Hilfe!!
Es hat funktioniert! Danke für den Trick :)
Sie sollten eine Demo für dieses Tutorial hochladen, das wäre hilfreich.
Es wäre toll, eine Demo zu haben, danke!
Wenn Sie box-sizing: border-box; zu #main hinzufügen, zieht es den padding-bottom in die Höhe von #main. Dies löste ein Problem, das ich hatte, als ich #main eine Höhe von 100 % gab.
Danke, das war eine große Hilfe!
Ich schätze die Hilfe.
Wie wäre es mit James Deans Sticky-Footer-Trick? Er ist sehr elegant, keine spezielle Markup benötigt. Alles wird mit CSS gemacht. Schauen Sie sich das an: http://mystrd.at/modern-clean-css-sticky-footer
Ich bin verwirrt, warum man dem Footer nicht einfach position: fixed geben kann? Es scheint mir, dass es auf diese Weise einfacher zu erreichen wäre. Funktioniert es vielleicht nicht in IE oder so?
Manchmal muss der Footer im Fluss bleiben, zum Beispiel bei Hintergründen im Hauptbereich.
Hier ist etwas schönes SASS, das Sie damit verwenden können :)
Funktioniert wie ein Zauber………… :) <3
Mir ist aufgefallen, dass einige Leute ein Problem damit hatten, dass der Hintergrund nicht über die Abmessungen des Browserfensters hinausging. Nachdem ich selbst auf das gleiche Problem gestoßen bin, habe ich diese Lösung gefunden
Ändern Sie dies
Zu diesem
Hallo,
Wenn .page-wrap position:relative hat, werden Links im Footer „abgedeckt“ und funktionieren nicht.
Gibt es dafür eine Lösung?
Danke
Das ist einfach GROSSARTIG!!! Danke!!
Warum bricht das, wenn ich „Position: Relative;“ auf der Hauptinhalt-DIV gesetzt habe? Meine Hauptinhalt-DIV muss aufgrund des Layouts, das ich habe, relativ positioniert sein. Gibt es eine Möglichkeit, es zum Laufen zu bringen? Danke!
Kann jemand den Zweck des Lorum Ipsum JS erklären, das an .page-wrap angehängt ist? Sehr dankbar. Danke!
Außerdem hatte ich Probleme in IE 8, aber ich habe einfach float: left zum Footer hinzugefügt, und das hat es behoben.
Das Lorem Ipsum ist nur für die Demo da. Schauen Sie sich den Ergebnis-Tab an.
Danke!
Sehr geehrter Herr, ich habe ein kleines Weblog, das im Design vollständig responsiv ist, ich mag alles daran, aber die Sache, die ein Problem verursacht, ist, dass die Website nicht die volle Breite hat und wenn ich versuche, ihre Breite zu ändern, verliert sie ihr responsives Verhalten bei verschiedenen Bildschirmgrößen. Ich dachte also, ob Sie es sich ansehen und mir helfen könnten, es in voller Breite zu konvertieren.
Die andere Option, über die ich nachdachte, war, zwei Sticky-Sektionen zur Website hinzuzufügen, eine links und eine rechts, aber ich habe keine Ahnung, wie das geht (ich meine, Sticky-Sektionen zu erstellen ist einfach, aber wie man sie an der gewünschten Stelle meiner Website platziert, ohne die Responsivität zu beeinträchtigen, ist etwas schwierig). Ich wäre Ihnen sehr dankbar für Ihren Rat und Ihre Hilfe.
Großartig, Chris! Danke fürs Teilen. Ich habe das schon einmal gemacht gesehen, aber ich habe nicht wirklich darüber nachgedacht, es zu implementieren, bis ich auf ein Mockup gestoßen bin. Ich wusste, dass ich Ihre Seite für den benötigten Code-Schnipsel aufsuchen könnte.
Ich dachte, die Verwendung von
{margin:0}
sei schlechte Praxis…
Das Sternchen in meinem Beitrag wurde fallen gelassen. Ich wollte sagen, dass ich dachte, die Verwendung eines Sternchens, um alle Elemente auf der Seite auszuwählen und die Ränder auf Null zu setzen, als schlechte Praxis galt. Zumindest habe ich das irgendwo gelesen.
Die Grundlage für diese Überlegung ist, dass dieser Selektor alle Elemente auf der Seite auswählen muss und das langsamer ist als etwas Spezifischeres wie ein ID-Selektor, der nur eine Übereinstimmung hat. Das ist technisch richtig, aber es wird keinen spürbaren Unterschied bei Geschwindigkeitstests ergeben. Außer in *wirklich extremen* Umständen. Das gilt seit einem Jahrzehnt, daher wäre alles, was wir tun können, um diese Wahrnehmung auszumerzen, großartig. Schreiben Sie CSS-Selektoren, die für Sie funktionieren, und machen Sie sich nicht allzu viele Sorgen um die Leistung von Selektoren.
.page-wrap {
min-height: 100%;
}
.page-wrap:after {
content: “”;
display: block;
}
Dieses kleine Stück Code hat es für mich behoben, jetzt, egal wie weit ich meine Seite herauszoome, mein Footer bleibt am unteren Rand der Seite, danke für die Hilfe, Freund :)
Hallo,
Diese Technik wurde verwendet, so dass es jetzt ein Layout mit .page-wrap gibt und darin kommt der Header, darunter der Inhalt, und nach .page-wrap kommt der Footer.
Nun gibt es eine Seite, auf der ich einen Div im Inhaltsbereich vertikal zentrieren muss. Die Breite des Divs ist bekannt, aber die Höhe nicht.
Ist das möglich?
Habe Optionen von absolute table (css) versucht, aber ohne Erfolg.
Danke
Vielen Dank,
funktioniert super!
Das ist mein Sass-Mixin
Es funktioniert gut, obwohl ich das Problem mit dem **unteren Rand** gelöst habe, indem ich einfach „overflow:hidden“ zum Footer hinzugefügt habe.
Toller Beitrag.
Es gibt einen Bug in IE7
Der Footer schneidet den Body-Inhalt ab
Kann jemand helfen?
Mit freundlichen Grüßen!
Hallo,
Ich habe den obigen Code in mein Projekt implementiert. Aber er hat überhaupt nicht funktioniert.
Der Footer wird in der Mitte des Inhalts angezeigt.
Bitte helfen Sie.
Das sieht sehr nach einer Lösung aus, die ich schon seit einiger Zeit benutze, aber etwas komplizierter und ich frage mich, ob ich etwas übersehe. Die Nachteile für beide sind die gleichen: muss `min-height` (IE8+) unterstützen und die Höhe des Footers kennen.
Ich denke, auf diese Weise wird Ihr `site-footer` nicht automatisch 100 % breit sein (einfache Lösung, natürlich: `width: 100%`). Aber… übersehe ich etwas anderes? Hier ist es auf codepen.
Es gibt eine Sache, die man in meiner beachten muss, aber sie (ich glaube) gilt auch für Ihre: mit einem Body (oder Container) mit `min-height: 100%` und keinem oberen `padding`, wenn Sie mit etwas beginnen, das einen oberen Rand hat oder mit etwas enden, das einen unteren Rand hat, wird es über seinen Elternteil hinausgehen; das heißt, wenn das erste Element in Ihrem `body` ein margined `h1` ist, wird der Rand des `h1` dazu führen, dass der `body` im Wesentlichen einen oberen Rand hat, was bedeutet, dass die Seite nie so kurz wie 100 % sein wird (sie wird 100 % + Randwert sein) und immer scrollen wird. In meinem Codepen-Beispiel habe ich dem `body` oben ein wenig `padding` hinzugefügt, um dem Rechnung zu tragen.
Ich bin neugierig auf Ihre Gedanken und ob ich etwas übersehen habe, das die zusätzlichen Container usw. erforderlich machen würde.
Das Problem bei der Festlegung der Position des Footers auf fixed oder absolute ist, dass er immer sichtbar ist. Wenn Sie also eine Website haben, deren Höhe je nach Seite, auf der Sie sich befinden, variiert, dann erscheint der Footer nicht am Ende der tatsächlichen Seite, sondern am Ende Ihres Browserfensters.
Das stimmt für `position: fixed`, @Ottaz. Aber nicht für `position: absolute` – nicht, wenn das Container-Element (das Element mit `position: relative` – in diesem Fall der `body`) über das sichtbare Fenster hinausgeht. Was es in meinem Beispiel tut. Der `position: absolute` Footer ist absolut am unteren Rand des `body` positioniert, der (und natürlich sein sollte) am unteren Rand des sichtbaren Inhalts liegt).
Danke Ben, das ist der beste Weg, den ich gefunden habe, um einen Sticky Footer zu haben.
Kudos :)
Das ist fantastisch! Vielen Dank, Chris.
Sie verweisen auf „.push“
.site-footer, .page-wrap:after {
/* .push muss die gleiche Höhe wie der Footer haben */
height: 142px;
}
aber ich sehe kein Element mit dem Klassennamen ‚push‘. Vielleicht ist das aus einer früheren Version des Artikels?
Tolle Methode in der Tat. Leider habe ich eine andere Situation, bei der ich einen Header über dem Hauptinhaltsbereich und einen Footer darunter habe. Also habe ich folgenden Code geschrieben
Es scheint gut zu funktionieren, aber ist es gut, diese Methode zu verwenden?
Dies funktioniert nicht korrekt, wenn die Höhe des Footers abnimmt. Also ist dies kein Sticky Footer.
Wenn Sie border-box box-sizing verwenden (https://css-tricks.de/box-sizing/, unterstützt ab IE8+), können Sie einfach einen unteren Rand hinzufügen, um den unteren Rand des .page-wrap auszugleichen, und den Code entfernen, der den „push“ hinzufügt.
Hallo Chris. Danke dafür! Funktioniert überall gut, außer auf EINER Seite.
Ich weiß nicht, was es mit dieser einzelnen Seite auf sich hat, dass der Footer vom unteren Rand abfällt.
Hat jemand eine Idee, woran das liegen könnte?
http://kennlucas.com/contact-thanks.htm
Ich weiß, es ist ein bisschen altmodisch, aber ist es nicht einfacher und in praktisch jedem Browser bulletproof, eine Tabelle wie früher zu verwenden? Ja, es ist alt, aber es ist auch erprobt und getestet. So etwas funktioniert genau wie erwartet: http://jsfiddle.net/L6daa/
Ich habe diesen Code verwendet. Funktioniert gut mit IE8+. Gibt es einen Hack für IE7? Bitte helfen Sie.
Ich möchte unnötige Wrapper vermeiden.
Ich setze HTML auf height:100%, BODY auf min-height: 100%, und füge dann BODY:AFTER hinzu, um Platz für den Footer zu schaffen. Keine Wrapper.
Funktioniert super! Vielen Dank!!! : )
Ich habe es korrekt funktionalisiert, und die in den Kommentaren gemachten Änderungen sind sehr nützlich.
Nachdem ich den Code verwendet habe, habe ich eine Situation, in der der Footer einen weißen Rand rechts hat?
Irgendwelche Ideen?
Versuchen Sie es in einem anderen Browser und sehen Sie, ob die Seite anders gerendert wird. Wenn ja, fügen Sie ein CSS-Reset in Ihre Seite ein.
Das funktioniert gut, wenn Sie normalize.css nicht verwenden. Wenn Sie es verwenden, gleichen die oberen Ränder einiger Elemente den Footer aus.
Ich habe diese Methode schon oft angewendet, aber bei meiner ersten Website mit Normalize. Am Ende bin ich zu James Deans „Sticky Footer“ gewechselt, wie in einem früheren Beitrag erwähnt. Funktioniert mit Normalize.
http://mystrd.at/modern-clean-css-sticky-footer/
Mir ist gerade aufgefallen, dass an diesem Beispiel etwas „falsch“ ist. Das Beispiel besagt Folgendes
/* .push muss die gleiche Höhe wie der Footer haben */aber es gibt keine Klasse namens push. Es sollte so etwas sagen wie
/* Der untere Rand von .page-wrap muss die gleiche Höhe wie der Footer haben */Guter Fang! Ich werde das Codebeispiel aktualisieren. Wird begraben, da nicht mehr relevant.
Beste Methode, die ich bisher gesehen habe, gute Arbeit.
Diese Methode funktionierte in allem bis IE8 auf einer Website mit einem komplexen Layout, bei der mehrere andere gängige Methoden nicht funktionierten. Dies ist jetzt eine gängige Methode!
Cool. Das hat super funktioniert und ist schön und straff zusammengefügt. Ich habe viele Ansätze ausprobiert, aber dieser hat für mich am besten funktioniert. Danke.
Hey! Das gefällt mir. Es ist einfach und hilfreich.
Ich habe einen „border-radius: 10px;“ für etwas mehr Stil implementiert.
Ausgezeichnet! Ich habe viele Optionen ausprobiert, aber das hier ist einfach perfekt!
Wenn Sie eine Art Abstand zwischen
.page-wrapund dem Footer lassen, wird letzterer um das Maß dieses Abstands vom unteren Rand des Viewports abgeschnitten. Die einfachste Lösung ist, diesen Abstand in einen Padding für entweder.page-wrapoder den Footer umzuwandeln.Sehr ausgezeichnete Hilfe / Tipp! Danke :)
Das verursacht Probleme mit Farbverläufen. Der Verlauf stoppt am Anfang des Footers.
HTML/CSS braucht eine Standardoption für Sticky Footer anstelle all dieser Workarounds…
Danke Mann. Ich habe versucht herauszufinden, wie man dieses Problem löst, und jetzt ist es mit Ihrer Methode behoben, vielen Dank!! Diese Methode funktioniert zu 100 %, nochmals vielen Dank :)
Hallo. Das ist eine großartige Lösung.
Ich habe jedoch ein Problem…
Wenn es wenig Inhalt gibt, reicht mein Inhaltsabschnitt nur bis zu einem bestimmten Punkt, danach bleibt eine weiße Lücke (die Standardfarbe meines Körpers) bis zum Footer. Ich habe die Inhaltsichtbarkeit: 100 %, daher ist das etwas verwirrend. Die Höhe meines Inhalts scheint fest zu sein und kann einen bestimmten Punkt nicht überschreiten.
Hat jemand Vorschläge? (Sie können dies unter http://www.jamesstok.es sehen)
Danke
Ich habe ein Problem, bei dem ich einen Schieberegler habe, der sich in meiner Vorschau oben befindet, aber wenn ich ihn auf den Server hochlade, bewegt er sich nach unten rechts über den Sticky Footer.
???
Ich habe ein Problem, bei dem ich einen Schieberegler habe, der sich in meiner Vorschau oben befindet, aber wenn ich ihn auf den Server hochlade, bewegt er sich nach unten rechts über den Sticky Footer.
???
http://www.gatheringplace.us/Site/home.html
Ich benutze schon seit Jahren etwas Ähnliches. :D
Wir haben eine Variante dieser Technik, die nur eine min-height erfordert und fast mit Bootstrap 3 funktioniert. Sehen Sie sich das Beispiel hier an
http://mnmtechconsulting.com/proper-sticky-footer
Manchmal hilft es, wenn Sie die Höhe hinzufügen zu
Ich habe einen kleinen Artikel zu diesem Thema mit Viewport-Einheiten geschrieben: https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551
Warum funktioniert das nicht in Firefox?
Hallo Leute. Ich fange gerade mit der Webentwicklung an und verstehe nicht, was dieser Teil des CSS-Codes macht
.page-wrap:after {content: "";
display: block;
}
Ich habe damit in CodePen herumgespielt und sehe, dass der Sticky Footer ohne das eine oder andere nicht funktioniert. Trotzdem sehe ich nicht, was er tut.
Danke Jungs :)
Das div page-wrap sollte das erste und letzte div in Ihrem Code direkt vor dem Footer sein.
Der :after-Selektor wird den Footer unter den gesamten Inhalt schieben.
Ich glaube
Es wird hier etwas erklärt
http://www.w3schools.com/cssref/sel_after.asp
Ich habe etwas Ähnliches gemacht, indem ich die ‚vh‘-Eigenschaft mit der CSS3 ‚calc()‘-Methode kombiniert habe – funktioniert fast überall (außer in älteren IE-Versionen).
Da es sehr einfach in jedem Thema/Framework zu verwenden ist, halte ich es für eine der schnellsten und zukunftssichersten Lösungen, um einen Sticky Footer zu erhalten. Korrigieren Sie mich gerne, wenn ich falsch liege. ;)
Danke! Das hat es einfacher gelöst. Mit der im Artikel beschriebenen Methode hatte ich ein Problem in IE11.
Das Problem in IE11 war, dass ich das Haupt-Tag als page-wrapper verwendet habe und dafür display:block nicht definiert ist, sodass after-Elemente nicht korrekt funktionieren.
Meine Lieblingslösung!
Ich denke, Sie können sogar das Folgende weglassen
html, body {
height: 100%;
}
weil ‚.page-wrap‘ dank ‚vh‘ nicht mehr elternabhängig ist.
Hallo, danke für die Hilfe ^^
Ich habe das ausprobiert und es funktioniert perfekt unter Chrome Desktop.
Ich glaube nicht, dass das auf Mobiltelefonen funktioniert, oder?
Danke
Funktioniert nicht. Warum denken Sie, kann es sein?
Tolle Anleitung. Ich habe nach etwas gesucht, das mit Adobe Edge funktioniert/umgeht, und das war perfekt. Danke
Das lässt sich leicht mit
flex-boxerreichen.Seit Jahren benutze ich diese Methode, aber dann sah ich kürzlich die Bootstrap-Art, dasselbe zu implementieren. Ich habe mich nur gefragt, wie effektiv es ist, „position: relative;“ auf das “”-Tag anzuwenden. Ist das eine richtige Art, es zu tun? Ich dachte, das HTML-Tag sollte nicht angefasst werden.
Ich wollte fragen, ob die Verwendung dieser Stile gute Praxis ist
‘html{ min-height: 100%; position: relative;}
footer{ position: absolute; bottom: 0; width: 100%; height: 60px;}
body{ margin-bottom: 60px;}’
Dies würde den Footer in den meisten Browsern sticky machen. Aber ich bin mir nicht sicher, ob es die richtige Kodierungsethik ist. Was denken Sie?
Wenn Sie die Höhe von html und body auf 100 % setzen, wird das window.onscroll-Ereignis nicht ausgelöst, obwohl Scrollbalken erscheinen und die Seite scrollt…
Übersetzt sich diese Methode einfach nicht gut auf ältere Systeme?
Einfache und beste Lösung. Wir müssen
height: 100%nicht für html und body hinzufügen, in diesem FallIch habe Ihre Technik verwendet, Adam. Funktioniert für mich.
Nur eine Zeitverschwendung :)
Footer Sticky (Tabelle): http://codepen.io/edalis/pen/oLEgGJ
Footer Sticky (absolut): http://codepen.io/edalis/pen/VjyNLE
Ich denke, dieses Beispiel ist besser, wenn der Wrapper ein Kind von Body ist.
http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
Funktioniert einwandfrei, danke
Wenn Sie ein
inline-block-Element haben, möchten Sie vielleicht auchvertical-align:middle;hinzufügen, um unerwünschte vertikale Scrollbalken in einigen Browsern zu vermeiden.Beispiel
HTML-Code
CSS-Code
Ich denke, es funktioniert besser, indem der Footer absolut verwaltet wird
http://codepen.io/anon/pen/woPOdX
Vielen Dank!! Ich habe danach gesucht, seit einiger Zeit!
Ich wollte nur erwähnen, dass Sie einen Sticky Footer ohne verrückte Hacks haben können. Hier ist er
Siehe den Pen Sticky Footer von nicolasmn (@nicolasmn) auf CodePen.
Heutzutage können wir
position: stickyverwenden.Demo Pen https://codepen.io/D-Heap/pen/RjwEEr
Funktioniert position: sticky aber in allen Browsern?
Diese hier funktioniert gut für die Grundaufstellung und Bootstrap – https://www.prodjex.com/2018/03/create-a-sticky-website-footer/
Ich sehe das bei kürzeren Seiten nicht funktionieren. Es wäre großartig, wenn es auch am unteren Bildschirmrand bleiben würde, wenn der Inhalt kürzer als die Fensterhöhe ist
footer {
transform: translateY(100vh);
height: 25px;
width: 100%;
text-align: center;
}