nicht angemeldet
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