Contao 3 Sticky Footer

Im Gegensatz zur Grid Akademie 2 (für Contao 2) ist hier der Sticky Footer nicht durch eine Änderung am Frontend Template erreicht worden, sondern nur durch CSS. Ob mir das auch auf den Grid Seiten gelingt damit wird sich zeigen.

Gefunden habe ich dazu einen Beitrag von Peter Müller im Forum, den ich hier mal als Backup wiedergebe:




Contao Sticky Footer

Mit den folgenden CSS-Angaben muss man die fe_page nicht modifizieren:

  1. Volle Höhe für den Wrapper sicherstellen
    - html, body mit height: 100%
    - #wrapper mit min-height: 100%
  2. Footer unten im Wrapper positionieren
    - #wrapper bekommt position:relative
    - footer wird absolut positioniert mit bottom:0
    - footer bekommt eine definierte Breite (sonst shrink-to-fit wegen absoluter Positionierung)
  3. Platz reservieren für Footer
    - footer bekommt eine definierte Höhe
    - #container bekommt ein unteres padding, das mindestens so hoch wie die height des Footer.

 

Die Methode habe ich übrigens nicht erfunden. Sie steht zum Beispiel als "Sticky Footer" auch in dem Buch "Fortgeschrittenes CSS" von Ingo Chao und Corina Rudel. Und danke an Christian de la Haye für die Anregung zu diesem Gedankenspiel.