Footer am unteren Browserrand positionieren

Aus Contao Community Documentation

Version vom 22. September 2011, 16:03 Uhr von Wichteldesign (Diskussion | Beiträge)

(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)

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;
}
Ansichten
Meine Werkzeuge

Contao Community Documentation

Ich überlege gerade warum Contao Developer einen Hangout mit Bildübertragung machen... abgesehen von TheTril sind wir da alle relativ hässliche Typen wo Audio deutlich reichen würde. *g*

Leo Unglaub
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge