Bruce: div-fenster soll sich mit browser skalieren

SELF-Forum

div-fenster soll sich mit browser skalieren

Bruce
– Informationen zu den Bewertungsregeln

Hallo,
ich möchte eine neue Seite bauen, mit div und css.

Im Beispiel habe ich einen roten Hintergrund und darauf soll das Menu kommen (grau). Das funktioniert auch schon.
Darunter kommt das Hauptfenster mit dem Inhalt (im Beispiel blau).
Dieses soll sich immer der größe des browser-fensters anpassen.
Das Funktioniert auch schon im firefox, opera und IE 7. Nur im IE 6 nicht. Ich hoffe jemand kann mir helfen, dass es auch im IE 6 funktioniert.
Hier ist mal der QuellCode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de_DE" xml:lang="de_DE">
<head>
    <title>Test</title>
    <style type="text/css">
<!--
html, body
{
 margin: 0px;
 padding: 0px;
 height: 100%;
 border: none;
}

#main
{
 position: relative;
 width: 800px;
 margin: auto;
 height: 100%;
 background: #FF0000;
}

#banner
{
 position: absolute;
 width: 400px;
 top: 20px;
 left: 140px;
 height: 100px;
 background: #AAAAAA;
}

#content
{
 position: absolute;
 width: 600px;
 top: 150px;
 left: 140px;
 bottom: 0px;
 background: #0000FF;
}
-->
 </style>
</head>

<body>
 <div id="main">
  <div id="banner">
  </div>
  <div id="content">
  </div>
 </div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. div-fenster soll sich mit browser skalieren

    D.R. Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    Dieses soll sich immer der größe des browser-fensters anpassen.
    Das Funktioniert auch schon im firefox, opera und IE 7. Nur im IE 6 nicht.

    #content
    {
    position: absolute;
    width: 600px;
    top: 150px;
    left: 140px;
    bottom: 0px;
    background: #0000FF;
    }

    Der IE6 kann top/Bottom (genau die left/right) nicht in Kombination verwenden. Deshalb kannst du den gewünschten Effekt in diesem „Browser“ leider nicht mit CSS-Mitteln erzielen.

    Die einzige Möglichkeit wäre, die Höhe per JavaScript auszurechnen.
    Also etwa:

      
function anpassen(){  
document.getElementById("content").style.height = (document.body.offsetHeight - 150) + "px";  
}

    (Bin mir nicht sicher, ob „offsetHeight“ jetzt richtig angewendet wurde, da ich sonst immer mit window.innerHeight gearbeitet habe, was der IE nicht kennt)

    Diese Funktion musst du dann nach dem Laden und bei Veränderung der Browserfenstergröße ausführen.
    Also:

      
window.onload = anpassen;  
window.onresize = anpassen;

    Ich denke mal, wer noch den IE6 verwendet, kann JS auch nicht ausschalten :)

    mfg. Daniel

    --
    Experten raten von der Verwendung des Internet Explorers ab!
    Mein SELF-stylesheet | Darum Firefox!
    Selfcode: ie:{ fl:{ br:> va:) ls:[ fo:| rl:( n4:# ss:| de:> js:| ch:? mo:} zu:}
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. div-fenster soll sich mit browser skalieren

      Felix Riesterer Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Lieber Daniel,

      Die einzige Möglichkeit wäre, die Höhe per JavaScript auszurechnen.

      ...oder Du überlässt diesen Kram einem bereits fertigen Javascript, welches diese CSS-Lücken im IE<7 schließt: [IE7 von Dean Edwards]

      Liebe Grüße aus Ellwangen,

      Felix Riesterer.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln