zippex: div und height:auto / 100%

SELF-Forum

div und height:auto / 100%

zippex
– Informationen zu den Bewertungsregeln

Hallo!
Ich habe ein Problem mit der Höhe eines divs. In einem anderen Thread vor ein paar Stunden fiel im Zusammenhang mit divs schon ein sehr brauchbarer Link (http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm), allerdings habe ich damit mein Problem nicht ganz in Griff bekommen.

Um auf den Punkt zu kommen am besten erst mal noch ein Link:
http://www.n-zipp.de/div.html. Das ist mein bisheriger Entwurf, Farben etc. bitte nicht beachten.

Die Seite soll aus drei horizontal getrennten Bereichen bestehen von denen der mittlere in der Höhe variabel sein soll. Dass die "Fußnote" am unteren Rand der Seite platziert wird habe ich wie beim ersten Link oben beschrieben dadurch erreicht, dass ein (später unsichtbares) blaues div 100% Höhe annimmt und auch beim body height:100% ist.
Leider klappt dieser Trick mit dem mittleren Bereich nicht mehr - die 100% beziehen sich wieder auf die Höhe von body, weshalb der rechte mittlere gelbe Kasten nach unten übersteht. Das linke div hat als height:auto, aber auch damit erreiche ich nicht mein Ziel.

Hier noch der Quelltext:
<!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" xml:lang="de">
<head>
   <title>noch keiner</title>
</head>

<body style="background-color: #F5F5F5; margin:0px; padding:0px; height:100%;">
<div style="margin-left:auto; margin-right:auto; width:722px;">
    <div style="position:absolute; top:3px; height:99%; width:722px; background-color:#0000AA">

<div style="position:absolute; top:0px; left:0px; height:160px; width:310px; background-color:#FFF000">
        logo und co
        </div>

<div style="position:absolute; top:0px; left:312px; height:160px; width:410px; background-color:#FFF000">
        ein bild
        </div>

<div style="position:absolute; top:162px; left:0px; height:auto; width:310px; background-color:#FFF000">
        menu und info<br />
        </div>

<div style="position:absolute; top:162px; left:312px; height:100%; width:410px; background-color:#FFF000">
        inhalt<br />
        </div>

<div style="position:absolute; bottom:0px; left:0px; height:50px; width:722px; background-color:#abc777">fu&szlig;note        </div>
    </div>
</div>
</body>
</html>

Eventuell habe ich auch einen groben Denkfehler gemacht, momentan fällt mir leider keiner auf. Vielleicht schauen noch ein paar Leute kein Fussball und jemand hat eine Idee :)
Viele Grüße!
zippex

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. div und height:auto / 100%

    Danny
    – Informationen zu den Bewertungsregeln

    Hi,

    vielleicht hilft Dir dieser Artikel weiter: http://www.alistapart.com/articles/footers/

    Gruß
    Danny

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. div und height:auto / 100%

      zippex
      – Informationen zu den Bewertungsregeln

      Hi Danny!

      vielleicht hilft Dir dieser Artikel weiter: http://www.alistapart.com/articles/footers/

      Danke für den Tipp! Ich komme mir zwar ein bisschen seltsam vor, css mit Javascript zu verändern, aber anscheinend wird einem das in diesem Fall verziehen. Noch stimmt es nicht ganz (bei ganz niedrigem / ganz hohem Browser-Fenster variiert der untere blaue Spalt).
      http://www.n-zipp.de/div.html
      Aber ich denke, dass ich das noch irgendwie hinbiegen kann. Falls jemand eine Lösung ohne Javascript kennt würd mich diese natürlich auch interessieren!
      Viele Grüße!
      zippex

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. div und height:auto / 100%

        Danny
        – Informationen zu den Bewertungsregeln

        Im genannten Artikel wird auch eine Lösung ohne Javascript vorgestellt.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln