Footer am unteren Browserrand positionieren: Unterschied zwischen den Versionen
Aus Contao Community Documentation
| Zeile 3: | Zeile 3: | ||
Zur demonstration sind der Header, Footer und der Container eingefärbt. | Zur demonstration sind der Header, Footer und der Container eingefärbt. | ||
| − | {{msgWarning|Dieser Code ist noch nicht im | + | {{msgWarning|Dieser Code ist noch nicht im Internet Explorer getestet. Wenn es funktioniert kann dieser Hinweis entfernt werden.}} |
<source lang="css"> | <source lang="css"> | ||
Version vom 22. September 2011, 16:06 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 { width: 980px; margin: 0 auto; background: blue; padding-bottom: 335px; } #footer { position: absolute; bottom: 0; width: 100%; height: 355px; background: green; }
