Footer am unteren Browserrand positionieren: Unterschied zwischen den Versionen

Version vom 22. September 2011, 16:05 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.

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

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;
}

@@ Zeile 2: / Zeile 2: @@
 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">

Footer am unteren Browserrand positionieren: Unterschied zwischen den Versionen

Aus Contao Community Documentation

Version vom 22. September 2011, 16:05 Uhr

Ansichten

Meine Werkzeuge

Suche

Navigation

Verstehen

Verwenden

Entwickeln

Verschiedenes

Werkzeuge