Footer und min-height:100%

[Jochen]

Hallo allerseits,

ich versuche mich gerade an einem Layout, bei dem ich folgendes Problem habe:

Ich möchte, dass ein div #container immer mindestens die ganze Fensterhöhe einnimmt, dabei aber in der Höhe wächst, wenn der Inhalt entsprechend lang ist. Gleichzeitig möchte ich einen Footer ganz unten auf der Seite haben. Beides bekomme ich nicht unter einen Hut.

Momentan sieht das so aus (nur die Layout-Struktur, Inhalte rausgenommen):

<div id="container">
 <div id="header">
  <h1><a href="#" title="Testsite">Testsite</a></h1>
 </div>

<div class="menu">
                <h2>ein Menü</h2>
 </div>
 <div id="seitenleiste">
 </div>
   <div id="inhalt">
 </div>
  <div id="footer">
  </div>
</div>

Mit folgendem CSS (nur die wesentlichen Teile):
* {
 margin: 0;
 padding: 0;
}
html, body {
 height: 100%;
 font-size: 100.01%;
}
#container {
 position: relative;
 margin: 0 auto;
 width: 90%;
 min-width: 40em;
 max-width: 65em;
 height: auto !important;
 height: 100%;
 min-height: 100%;
 overflow: visible;
}
#header {
/* keine besonderen Dinge, außer Hintergrund, etc. */
}
#inhalt {
 width:65%;
 float:left;
 position:relative;
}
#seitenleiste {
 width:28.5%;
 float:right;
}
#footer {
 position:absolute;
 bottom:0;
 height:1.8em;
 clear:both;
 width:100%
}

Das funktioniert solange, wie der Inhalt nicht höher wird, als das Browserfenster (der Footer ist unten, #container hat die richtige Höhe). Wird der Inhalt höher, bleibt #container bei einer Höhe von 100% (und wird nicht gestreckt) und der Footer ist mitten im Inhalt. Positioniere ich #footer mit position:relative, wird #container gestreckt, der Footer sitzt unten alles bestens. Ist nun der Inhalt niedriger als das Browserfenster hoch, so ist #container 100% hoch, aber der Footer sitzt direkt unter dem Inhalt, nicht am unteren Ende des Fensters (was bei position:relative ja so sein sollte, oder irre ich mich da?).

Zur Verdeutlichung habe ich hier noch vier Screenshots:

hoher Inhalt, position:absolute (so soll's *nicht* aussehen):
http://accident.physik.uni-konstanz.de/~jgrebing/Layout_v2/hoch_absolute.png
hoher Inhalt, position:relative (so soll's aussehen):
http://accident.physik.uni-konstanz.de/~jgrebing/Layout_v2/hoch_relative.png
niedriger Inhalt, position:absolute (so soll's aussehen):
http://accident.physik.uni-konstanz.de/~jgrebing/Layout_v2/niedrig_absolute.png
niedriger Inhalt, position:relative (so soll's *nicht* aussehen):
http://accident.physik.uni-konstanz.de/~jgrebing/Layout_v2/niedrig_relative.png

Wer hat eine Idee, wie ich das hinbekomme? Bzw. wo liegt mein Fehler? Vielen Dank im Voraus für alle hilfreichen Ideen!
Jochen

[kungschu]

Hallo Jochen.

Mir war es jetzt zuviel, mich durch Code und Links durchzuarbeiten. Vielleicht kannst du das nächste mal die Links verlinken und den Quellcode highlighten. So könnte man dein Problem schneller nachvollziehen und das Ganze wäre überschaubarer. Danke.

Zu deinem Problem:
Hier findest du Beispiele zu deinem Anliegen.

MfG, Kungschu.

[Jochen]

Hi,

sorry, werde das nächste Mal die Verweise entsprechend verlinken und auch das Highlighting benützen.

Des Rätsels Lösung habe ich eben hier im Forum gefunden:
http://forum.de.selfhtml.org/archiv/2007/1/t143417/#m931295

Es liegt wohl an den beiden mit float platzierten divs #inhalt und #seitenleiste. Ich hatte gedacht, dass das clear: both im folgenden div bereits genügt, war aber nicht so. Ein br mit folgenden Eigenschaften hilft:

<br style="clear:both;height:0;font-size:0;line-height:0;margin:0;padding:0"/>

Viele Grüße,
Jochen

[wahsaga]

hi,

Wer hat eine Idee, wie ich das hinbekomme?

Mehr als http://www.alistapart.com/articles/footers dazu zu sagen hat, gibt's eigentlich gar nicht mehr.

gruß,
wahsaga

[Jochen]

Hallo!

Mehr als http://www.alistapart.com/articles/footers dazu zu sagen hat, gibt's eigentlich gar nicht mehr.

Danke, den Artikel kannte ich noch nicht, hab's aber mittlerweile herausgefunden (siehe zweite Antwort).