Footer am unteren Browserrand positionieren - Versionsgeschichte

Ways2web am 10. August 2013 um 22:59 Uhr

2013-08-10T22:59:27Z

Wichteldesign am 22. September 2011 um 13:08 Uhr

2011-09-22T13:08:53Z

Wichteldesign am 22. September 2011 um 13:06 Uhr

2011-09-22T13:06:09Z

Wichteldesign am 22. September 2011 um 13:05 Uhr

2011-09-22T13:05:52Z

Wichteldesign: hat „Fester Footer“ nach „Footer am unteren Browserrand positionieren“ verschoben

2011-09-22T13:04:54Z

hat „Fester Footer“ nach „Footer am unteren Browserrand positionieren“ verschoben

Wichteldesign: 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…“

2011-09-22T13:03:17Z

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…“

Neue Seite

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.

<source lang="css">
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;
}

</source>

[[Category:CSS HOWTOS]]

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

← Nächstältere Version		Version vom 22. September 2011, 13:05 Uhr
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 33: / Zeile 33: @@
      bottom: 0;
      width: 100%;
-     height: 355px;
+     height: 335px;
      background: green;
+}

@@ Zeile 25: / Zeile 25: @@
 #container {
      background: blue;
-     padding-bottom: 335px;
+     padding-bottom: 335px; /* Höhe des Footers */
+}

← Nächstältere Version	Version vom 22. September 2011, 13:04 Uhr
(kein Unterschied)