Martin Hölter: <div> bereich mit ans browserfenster angepasster höhe

Beitrag lesen

Hallo Matti!

is schon ein kreuz mit dem IE..

Ich entschuldige mich schon vorab beim Rest des Forums, dass ich ier eine "fertige Lösung" anbiete, aber das Problem hat mich auch interessiert.
So sieht das ganze wohl so aus, wie du es beabsichtigst, allerdings gibt es noch eine Besonderheit des IE (zumindest der 6.0):
Am unteren Rand werden ca. 1px hoch die Farben der Container main und menu angezeigt, nicht die von bottom. Weiss jemand, woran das liegen könnte?
Ausserdem erweiter der IE im Standards-Compliance-Modus auch die Container nicht, da die Größe relativ zum Elternelement (also <body>) ist, und der IE ja nciht wissen kann, dass das doch bitte mindestens so hoch wie das Browserfenster ist...

Ich kann das leider nicht in anderen IE-Versionen testen, wenn es dort nicht geht, musst du wohl html und body eine Höhe zuweisen (wunder dich dann aber nciht, wo auf einmal überall Scrollbars erscheinen ;-)

Gruß

Martin

<!--IE, geh doch bitte in den Quirks-Modus-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!--
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top">top</div>
<div class="menu"><div>menu</div></div>
<div class="main"><div>main</div></div>
<div class="bottom">bottom</div>
</body>
</html>

html, body {margin:0; padding:0;}

div.top {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  height: 100px;
  background-color: red;
  z-index:3;
}

div.menu {
  position: absolute;
  left: 0px;
  top:0;
  width: 200px;
  height: 100%;
  background-color: blue;
  z-index:1;
}

div.menu div {margin-top:100px;}

div.main {
  position: absolute;
  left: 200px;
  width: 600px;
  top:0;
  height: 100%;
  background-color: yellow;
  z-index:2;
}

div.main div {margin-top:100px;}

div.bottom {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 800px;;
  height: 100px;
  background-color: green;
  z-index:5;
}