Footer am unteren Browserrand positionieren: Unterschied zwischen den Versionen
Aus Contao Community Documentation
(Die Seite wurde neu angelegt: „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…“) |
K |
||
| (4 dazwischenliegende Versionen von einem Benutzer werden nicht angezeigt) | |||
| Zeile 2: | Zeile 2: | ||
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 Internet Explorer getestet. Wenn es funktioniert kann dieser Hinweis entfernt werden.}} | ||
<source lang="css"> | <source lang="css"> | ||
| Zeile 23: | Zeile 25: | ||
#container { | #container { | ||
| − | |||
| − | |||
background: blue; | background: blue; | ||
| − | padding-bottom: 335px; | + | padding-bottom: 335px; /* Höhe des Footers */ |
} | } | ||
| 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; }
