Nössl: <div> bereich mit ans browserfenster angepasster höhe

SELF-Forum

<div> bereich mit ans browserfenster angepasster höhe

Nössl Homepage des Autors
– Informationen zu den Bewertungsregeln

hallo,
ich habe diverse foren nach einer lösung durchsucht, aber nix gefunden. hoffentlich kann mir hier jemand helfen. will eine website nur mit css (als frameersatz) erstellen.
vereinfacht schaut das ganze so aus:

der html-code:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top">test</div>
<div class="menu">test</div>
<div class="main">test</div>
<div class="bottom">test</div>
</body>
</html>

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

div.menu {
  position: absolute;
  left: 0px;
  top: 100px;
  bottom: 100px;
  width: 200px;
  height: auto;
  background-color: blue;
}

div.main {
  position: absolute;
  top: 100px;
  left: 200px;
  bottom: 100px;
  width: 600px;
  height: auto;
  background-color: yellow;
}

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

jetzt funktioniert das ganze mit mozilla firefox so wie gedacht - am oberen und unteren rand 2 balken fixer höhe (100px) und 2 mittlere elemente die je nach browserfensterhöhe den verfägbaren platz aufbrauchen. nur der interent explorer missachtet die "bottom"-eigenschaft, wenn schon ein "top"-abstand definiert ist, d.h. er dehnt die div-bereiche nicht aus. hat hier jemand eine lösung.

mfg
matti

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. <div> bereich mit ans browserfenster angepasster höhe

    Martin Hölter
    – Informationen zu den Bewertungsregeln

    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;
    }

    --
    ss:| zu:) ls:# fo:| de:> va:| ch:? n4:° rl:( br:> js:| ie:% fl:| mo:?
    http://www.peter.in-berlin.de/projekte/selfcode/?code=ss%3A|+zu%3A)+ls%3A%23+fo%3A|+de%3A>+va%3A|+ch%3A%3F+n4%3A�+rl%3A(+br%3A>+js%3A|+ie%3A%25+fl%3A|+mo%3A%3F
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. <div> bereich mit ans browserfenster angepasster höhe

      Nössl
      – Informationen zu den Bewertungsregeln

      hallo martin,
      danke für die lösung. prinzipiell funktioniert das tatsächlich wie von mir gedacht. nur ein problem hab ich. da das ganze ja "geschummelt" ist - die menu- und main-bereiche werden unter den anderen versteckt - habe ich ein problem wenn der main-bereich (das ist bei meiner geplanten seite der einzige, wo das passieren kann) mehr inhalt enthält, als in das aktuelle fenster passt. dann verschwindet der mehrinhalt oder auch die scrollleisten hinter dem bottom-bereich.
      schade - mit firefox funktioniert es perfekt. dann bleibt mir wohl nur die verwendung von frames.
      mfg
      matti

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. <div> bereich mit ans browserfenster angepasster höhe

      Nössl Homepage des Autors
      – Informationen zu den Bewertungsregeln

      jetzt hab ich für den ie doch noch eine lösung ohne frames, aber mit einer tabelle gefunden. leider funktioniert diese variante im firefox nicht mehr wie erwünscht.

      <table width="800" height="100%" border="0" cellpadding="0" cellspacing="0">
        <tr bgcolor="#FF0000">
          <td height="100" colspan="2">&nbsp;</td>
        </tr>
        <tr>
          <td width="200" bgcolor="#0000FF">&nbsp;</td>
          <td valign="top" bgcolor="#FFFF00">
             <div class="main">
                <p>main</p>
             </div>
          </td>
        </tr>
        <tr bgcolor="#00FF00">
          <td height="100" colspan="2" bordercolor="1">&nbsp;</td>
        </tr>
      </table>

      stylsheet dazu:
      body {padding: 0; margin: 0;}

      .main {
       width: 100%;
       height: 100%;
       overflow: auto;
      }

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln