Footer am unteren Browserrand positionieren: Unterschied zwischen den Versionen
Aus Contao Community Documentation
K |
|||
| Zeile 33: | Zeile 33: | ||
bottom: 0; | bottom: 0; | ||
width: 100%; | width: 100%; | ||
| − | height: | + | height: 335px; |
background: green; | background: green; | ||
} | } | ||
Aktuelle Version vom 10. August 2013, 23:59 Uhr
Oftmals muss der Footer immer am unteren Rand des Browsers stehen, unabhängig von der höhe der Seite. Mit dem Contao-Framework geht das recht einfach. Diese CSS-Anweisungen reichen dafür aus.
Zur demonstration sind der Header, Footer und der Container eingefärbt.
html, body { margin: 0; padding: 0; height: 100%; } /* LAYOUT */ #wrapper { min-height: 100%; position: relative; } #header { height: 175px; background: red; } #container { background: blue; padding-bottom: 335px; /* Höhe des Footers */ } #footer { position: absolute; bottom: 0; width: 100%; height: 335px; background: green; }
