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 Internet_Explorer getestet. Wenn es funktioniert kann dieser Hinweis entfernt werden.}}
+
{{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, 14: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.


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=4386“
Ansichten
Meine Werkzeuge

Contao Community Documentation

Nur weil es bei Nachbarseite XYZ was gibt, wird automatisch oft davon ausgegangen, dass das fertige Bauteil einsatzbereit auf der Straße liegt.

Marie Dietz
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge