Wenn man heutzutage "sticky footer" hört, würde ich denken, die meisten Leute stellen sich eine position: sticky Situation vor, bei der ein Footer-Element im Scroll-Kontext eines übergeordneten Elements am Bildschirm fixiert bleibt.
Das ist nicht ganz, was ich hier meine. „Sticky Footers“ waren ein UI-Konzept, bevor position: sticky existierte, und sie bedeuten etwas leicht anderes. Die Idee ist, dass sie am unteren Bildschirmrand haften, auch wenn der Seiteninhalt nicht ausreicht, um sie dorthin zu schieben. Aber wenn genügend Inhalt vorhanden ist, werden sie fröhlich nach unten geschoben.
Wir haben uns in der Vergangenheit fünf Möglichkeiten angesehen, dies zu tun, darunter Techniken, die recht modern sind, wie calc(), Flexbox und CSS Grid.
Hier kommt ein sechster Herausforderer! Leser Sílvio Rosa schrieb Folgendes:
(Am einfachsten ist es wahrscheinlich auf einem mittelgroßen Desktop-Bildschirm zu überprüfen, da Sticky Footers dort sowieso am wichtigsten sind.)
Es ist so ziemlich nur das hier:
html, body { height: 100%;}
body > footer {
position: sticky;
top: 100vh;
}Was ich daran mag, ist, dass es keine spezielle zusätzliche Wrapper für Nicht-Footer-Inhalte erfordert.
Es ist auch ein bisschen verblüffend. Wenn ich top: 100vh; sehe, denke ich: *Nun, das wird nicht funktionieren, weil es den Footer außerhalb des sichtbaren Bereichs schiebt.* Aber das ist der clevere Teil. Es wird das tun, unabhängig davon, wie groß der Footer ist (keine magischen Zahlen), und dann wird die Sticky-Positionierung ihn wieder nach oben "saugen", um am unteren Rand zu haften. Aber er wird niemals Inhalte überlappen, daher ist es in Ordnung, ihn unter den Inhalt zu schieben, was ein Kernprinzip des Sticky-Footer-Musters ist.
Cool! :)
Ich habe das per E-Mail gesendet, als Lesezeichen gespeichert und in meine Notizen aufgenommen, damit ich es bei meinem nächsten Projekt nicht vergesse. Sehr gut gemacht!
Das ist schlichte Eleganz...
Meiner Meinung nach ist es unsinnig, JavaScript für Dinge wie das Ändern von CSS zu verwenden. Deshalb haben wir Grid und Flex, um es so einfach wie möglich zu machen ;)
Sie verfehlen den Punkt dieses Artikels in Ihrem Kommentar. Es wurde kein CSS mit JavaScript geändert. Der einzige sichtbare JavaScript-Code wurde zur Bequemlichkeit und nicht zur Notwendigkeit hinzugefügt (erleichtert die Darstellung des Effekts, den das CSS hat).
Ihr Code zeigt dagegen eine weitere Alternative, um denselben Effekt wie in dieser Demo zu erzielen. Daher ist er immer noch relevant.
Als ich das auf meinem Handy sah, war ich ziemlich verwirrt. Dann klickte es, und das Bearbeiten des JS, um allen Inhalt zu entfernen, ließ es für mich funktionieren.
Habe ich etwas übersehen? Ich sehe keinen Sticky Footer im Codepen. Habe Firefox, Chrome und Edge auf Mobilgeräten überprüft.
Er ist klebrig, wenn der Inhalt nicht ausreicht, um den Platz zu füllen. Wenn Sie also die untere linke Ecke des Codepens greifen und ihn viel höher machen, sodass die Absätze darunter Platz haben, werden Sie sehen, dass der Footer unten bleibt und der Weißraum sich ausdehnt. Wenn Sie ihn jedoch verkleinern, sodass der Inhalt unter den "Faltpunkt" reicht, verschiebt sich auch der Footer nach unten.
Brillant! Manchmal sind die besten Lösungen die einfachsten (wenn man weiß, wie es geht). Ich habe gestern damit gerungen und wurde "kreativ".
Ich bin kein Guru... woher kommt das Sticky-Element?
Schick. Für Greg – das JS dient nur zum Hinzufügen oder Entfernen von Inhalten. Für Tom – versuchen Sie, das Codefenster höher zu machen und Inhalt zu entfernen.
Oh, dank dem habe ich das nicht bemerkt ;)
Für diejenigen, die auf Handys sind, hier ist ein Testlink. Dasselbe, aber weniger Inhalt.
https://cdpn.io/kunukn/debug/JjyVRyR
Na sowas, das ist ja verdammt genial.
Safari Mobile tritt dem Chat bei
Es scheint für mich auf Safari Mobile zu funktionieren, siehst du es anders?
Das hat mich inspiriert, zu versuchen, einen Sticky Header mit
position:sticky;zu erstellen. Ich bin ein Fanhttps://codepen.io/alexstandiford/pen/dyzaKpa
Ich liebe das, danke!
Hm, ich wende das auf meinen bestehenden Footer an, aber ohne Erfolg. Irgendeine Idee, was es kaputt machen könnte? Es scheint einfach genug zu sein.
„Zuerst einmal beachten Sie, dass Sticky immer innerhalb seines übergeordneten Containers sticky bleibt.“ Wenn Ihr Element also keinen größeren Container hat, funktioniert es nicht.
Zitat aus: https://www.hamrodev.com/en/tutorials/css-sticky-and-wrapper-containers
Ich musste das auf die harte Tour herausfinden – in meinem Fall hatte ich einen umgebenden Div um alles (benötigt für die Offcanvas-Menü-Transition), der programmatisch die Höhe von 0 hatte (es gab dort einige gestauchte Overflow-Probleme).
Das war es, danke!
Sie möchten vielleicht
html, body { min-height: 100vh; }anstelle von dem verwenden, wenn Sie eine Sticky-Navigationsleiste haben.Sie verschwand manchmal nach Erreichen einer bestimmten Scrollhöhe.
Ich habe das Gefühl, dass diese Methode manchmal dazu führt, dass die Scrollbalken in Firefox grundlos angezeigt werden, wenn das Fenster vergrößert wird? Ich bin mir aber nicht sicher, warum.
Liebe die Einfachheit. Allerdings, auch bei kurzem Inhalt, wenn das erste Element (Header) einen oberen Rand hat, schiebt es den Footer um diesen Rand nach unten. Es schiebt ihn nicht nach unten, wenn der Body einen oberen Abstand hat.
Hi, netter Trick, kannst du den Beitrag mit den Informationen aus dem Codepen aktualisieren?
Danke :)
Das ist so schön, ich habe geweint. Als Lesezeichen gespeichert und in eine .txt-Cheat-Sheet mit Tricks aufgenommen, die ich aufbewahre.
Das funktioniert nicht, wenn die Seite irgendwann viel länger wird und Scrollbalken hat. Es bricht und der Body enthält nicht die gesamte Seite, sondern nur bis zur Höhe des Viewports.
Das kann Dinge durcheinander bringen, wie z. B. ein normal positioniertes Element, das am oberen Rand der Website haften soll.