Footer am unteren Browserrand positionieren

Aus Contao Community Documentation

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.


Dieser Code ist noch nicht im Internet_Explorer getestet. Wenn es funktioniert kann dieser Hinweis entfernt werden.

"Warnhinweis"


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;
}
Von „https://de.contaowiki.org/index.php?title=Footer_am_unteren_Browserrand_positionieren&oldid=4385“
Ansichten
Meine Werkzeuge

Contao Community Documentation

<TheTril> Stateless Template, Stateless Elements, Stateless Renderer :)
<TheTril> everything is stateles :D
<leo-unglaub> TheTril: genau wie Ed Snowden *g*

Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge