Footer am unteren Browserrand positionieren: Unterschied zwischen den Versionen
Aus Contao Community Documentation
| Zeile 25: | Zeile 25: | ||
#container { | #container { | ||
| − | |||
| − | |||
background: blue; | background: blue; | ||
| − | padding-bottom: 335px; | + | padding-bottom: 335px; /* Höhe des Footers */ |
} | } | ||
Version vom 22. September 2011, 16:08 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: 355px; background: green; }
