Sticky Footer ganz unten, reine CSS-Lösung

Beitragen UX
1

Hallo, Discourse-Enthusiasten,

ich möchte euch meine Lösung für einen „sticky footer" vorstellen, für die kein JavaScript erforderlich ist (eine Alternative zu dieser Anfrage). Dabei wird vorausgesetzt, dass ihr die Höhe eures Footers kennt. Ich habe meinem Footer zusätzliche 100 px gegeben, um etwas Abstand zwischen Inhalt und Footer zu haben. Falls ihr einen größeren Footer mit mehreren Spalten habt, solltet ihr im mobilen Tab eine andere feste Höhe angeben.

Schritt 1: Fügt dies im Register „Common CSS" ein:

body {
  position: relative;
}

#main {
  margin-bottom: 350px; /* entspricht der Footerhöhe – passt dies nach Bedarf an, sowohl im Common- als auch im mobilen Tab */
}

#sticky-footer {
  padding: 50px 0;
  background: var(--header_background);  /* optional */
  color: var(--primary-medium); /* optional */
  text-align: center; /* optional */
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

Schritt 2: Geht zu eurem \u003c/body\u003e-Tab und fügt euer Footer-HTML dort ein.

Beispiel:

\u003cdiv id=\"sticky-footer\"\u003e
  \u003cdiv class=\"wrap\"\u003e
      \u003c!-- euer Footer-Inhalt hier --\u003e
  \u003c/div\u003e
\u003c/div\u003e

Das war’s :slightly_smiling_face:. Euer Footer bleibt nun auch auf Seiten mit kurzem Inhalt am unteren Rand der Seite haften.

So sieht unser Footer auf einer Seite mit kurzem Inhalt aus:

image
image1150×1082 28.9 KB

Andernfalls würde er in der Mitte des Bildschirms platziert werden, wie hier:

image
image1316×1222 33.5 KB

3 „Gefällt mir“
2

Warum dieses anstelle der Standard-Footer-Themenkomponente von Discourse verwenden?

1 „Gefällt mir“
3

Du sagst es, Jeff :slight_smile: ..müssen wir für jeden zusätzlichen HTML- und CSS-Code Komponenten installieren?
Dies ist kein Tutorial zum Erstellen eines Footers, sondern eher eine schnelle Alternative, um einen Footer am unteren Rand der Seite zu fixieren, für diejenigen, die ihren eigenen Footer erstellen möchten.

4

Hmm, meine Überlegung ist, dass wir möchten, dass die Leute die Theme-Komponenten immer dann verwenden, wenn es möglich ist, da sie von uns als ‘offiziell’ gelten und somit vollständigen Support erhalten, automatisch aktualisiert werden usw. Was denkt ihr, @awesomerobot, @Johani und @jordan.vidrine?

2 „Gefällt mir“
7

Ja, wenn die offizielle Footer-Komponente Ihren Anforderungen entspricht, ist das schön, denn wir halten sie für Sie aktuell. Manche möchten jedoch ein anderes Layout.

Ich habe in der Vergangenheit etwas Ähnliches gemacht… der Prozess ist dem von OP ähnlich. Sie setzen die Höhe von #main-outlet auf 100 % der Viewport-Höhe (100vh) abzüglich der Höhe von Footer und Header. So sitzt Ihr Footer auf kurzen Seiten nun direkt am unteren Rand.

#main-outlet {
  box-sizing: border-box; // schließt Padding in die Höhenberechnung ein
}

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
  Mein Footer-Inhalt
</script>

<script type="text/discourse-plugin" version="0.8">
    api.decoratePluginOutlet(
      "below-footer",
      (elem, args) => {
          let headerHeight = document.querySelector(".d-header").offsetHeight;
          let footerHeight = document.querySelector(".below-footer-outlet").offsetHeight;
          let mainOffset = headerHeight + footerHeight;
          
          document.querySelector("#main-outlet").style.minHeight = "calc(100vh - " + mainOffset + "px)";
      }
   );
</script>

Screen Shot 2021-02-22 at 6.19.39 PM
Screen Shot 2021-02-22 at 6.19.39 PM878×787 118 KB

Das kommt häufig genug vor, dass es sich wahrscheinlich lohnt, dies automatisch im Kern zu implementieren, wenn Inhalte in footer.html oder in einem der beiden Footer-Plugin-Outlets vorhanden sind.

4 „Gefällt mir“
8

@cosdesign , wo befindet sich dieser CSS-Tab, wenn es dir nichts ausmacht, Kumpel :slight_smile:

9

Für Ihr Standardthema finden Sie es über die Schaltfläche „CSS/HTML bearbeiten“:

Untitled
Untitled1482×751 43.1 KB

Es wäre jedoch besser, es stattdessen als Theme-Komponente zu erstellen. (Klicken Sie auf die Schaltfläche „Installieren“ und wählen Sie dort „Neu erstellen“)

Weitere Informationen finden Sie unter Developing Discourse Themes & Theme Components :+1:

2 „Gefällt mir“
10

großartig :slight_smile:

1 „Gefällt mir“