div-Element mit 100% Höhe …
Moin,
ich bastle gerade an einem Homepage-Design und stoße immer wieder auf das Problem, daß man ein div-Element scheinbar nicht über das gesamte Browserfenster in die Höhe ziehen kann, was aber für das Layout von großem Vorteil wenn nicht unerläßlich wäre.
HTML-Code:
<div id="container">
<!-- weiterer Code -->
</div>
Code:
body {
margin: 0;
padding: 0;
height: 100%;
font-family: Verdana, Tahoma, Helvetica, Sans-serif;
font-size: 1em;
background-color: #6f6f6f;
color: #ffffff; }
#container {
background-color: #1c1c1c;
border-style: none solid;
border-width: 1px;
border-color: #000000;
padding: 10px;
width: 800px;
height: 100%;
margin: auto; }
Eigentlich sollte durch die height-Zuweisung im body- sowie div-Element mit der container-ID eine 100%ige Höhe möglich sein, meine Browser scheinen das jedoch nicht zu mögen und behandeln es immer wie height: auto;.
Getestet in Safari 2.0.4 und Firefox 2.0.0.1.
Nachtrag: wenn ich position: fixed; hinzufüge, dann hat der Container seine 100% Höhe, jedoch befindet er sich nicht mehr in der Mitte der Seite, wo er eigentlich hin soll.
Jemand 'ne Idee, was ich falsch mache bzw. ob das überhaupt möglich ist?
