Implementierung des klassischen CSS-Sticky-Footer-Layouts

Was ist ein Sticky-Footer-Layout?

Unser übliches Webseiten-Layout ist grundsätzlich in den Kopfbereich, den Inhaltsbereich und den Fußbereich unterteilt. Bei kleinen Inhalten im Kopf- und Inhaltsbereich wird der Fußbereich nicht zusammen mit dem Inhaltsbereich angeordnet, sondern immer am unteren Bildschirmrand angezeigt. Wenn der Inhaltsbereich viel Inhalt enthält, kann die Fußzeile mit dem Dokumentfluss erweitert werden und immer am unteren Ende der Seite angezeigt werden. Dies ist das legendäre Sticky-Footer-Layout. Ist das nicht leicht zu verstehen? Es ist okay, wenn Sie es nicht verstehen. Ich gebe Ihnen ein einfaches Beispiel.

Im Allgemeinen gilt: Wenn die Inhaltshöhe einer mobilen Seite nicht einen Bildschirm ausfüllt, befindet sich die Fußzeile nahe am unteren Bildschirmrand. Wenn die Inhaltshöhe einen Bildschirm überschreitet, folgt die Fußzeile dicht dahinter.

Methode 1: Flexbox-Layout

• Die Anzeige des übergeordneten Containers ist flexibel und die Reihenfolge der Elemente ist vertikal angegeben.
• Der Flex des Inhaltselements beträgt 1, was bedeutet, dass es wächst, wenn zusätzlicher Platz vorhanden ist.
• Fußzeile definiert eine Höhe

Klicken Sie fest, um die Demo zu sehen: Flexbox-Layout implementiert Sticky Footer

<div Klasse="Container">
  <div class="content">Inhalt</div>
  <div class="footer">Fußzeile</div>
</div>

Körper {
  Rand: 0;
}
.container {
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Mindesthöhe: 100vh;
}
.Inhalt {
  biegen: 1;
  /*Nicht erforderlich*/
  Breite: 100 %;
  Höhe: 300px;
  Zeilenhöhe: 300px;
  Textausrichtung: zentriert;
  Farbe: #fff;
  Schriftgröße: 30px;
  Schriftstärke: fett;
  Hintergrundfarbe: #71a8da;
  /*Nicht erforderlich*/
}
.Fußzeile {
  Höhe: 60px;
  /*Nicht erforderlich*/
  Breite: 100 %;
  Zeilenhöhe: 60px;
  Textausrichtung: zentriert;
  Farbe: #fff;
  Schriftgröße: 30px;
  Schriftstärke: fett;
  Hintergrundfarbe: #f85f2f;
  /*Nicht erforderlich*/
}

Methode 2: Polsterung unten + negativer Rand oben

• Der Container-Wrapper muss eine Mindesthöhe von 100 vh angeben (vh: Ansichtsfensterhöhe).
• Der Inhalt wird in den Inhaltscontainer geschrieben und padding-bottom wird als Höhe des Fußzeilencontainers angegeben.
• Fußzeile gibt Höhe und oberen Rand an, und der obere Rand ist ein negativer Wert der Höhe

Klicken Sie fest, um die Demo anzuzeigen: padding-bottom + negative margin-top, um einen Sticky Footer zu erzielen

<div Klasse="Wrapper">
  <div class="content">Inhalt</div>
</div>
<div class="footer">Fußzeile</div>

Körper {
  Rand: 0;
}
.wrapper {
  Breite: 100 %;
  Mindesthöhe: 100vh;
}
.Inhalt {
  /*padding-bottom sollte der Höhe des Footers entsprechen*/
  Polsterung unten: 60px;
  /*Nicht erforderlich*/
  Breite: 100 %;
  Höhe: 400px;
  Zeilenhöhe: 400px;
  Textausrichtung: zentriert;
  Farbe: #fff;
  Schriftgröße: 30px;
  Schriftstärke: fett;
  Hintergrundfarbe: #71a8da;
  /*Nicht erforderlich*/
}
.Fußzeile {
  /*margin-top sollte dem negativen Wert der Fußzeilenhöhe entsprechen*/
  Rand oben: -60px;
  Höhe: 60px;
  /*Nicht erforderlich*/
  Breite: 100 %;
  Zeilenhöhe: 60px;
  Textausrichtung: zentriert;
  Farbe: #fff;
  Schriftgröße: 30px;
  Schriftstärke: fett;
  Hintergrundfarbe: #f85f2f;
  /*Nicht erforderlich*/
}

Tipp: Der Teil zwischen den beiden /**非必須**/ ist kein notwendiger Code, um das Sticky-Footer-Layout zu implementieren. Es handelt sich lediglich um einige Hilfsstile und kann gelöscht werden.

Dies ist das Ende dieses Artikels über die Implementierung des klassischen CSS-Sticky-Footer-Layouts. Weitere relevante CSS-Sticky-Footer-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!