Fenster füllendes Layout mit Boxen

[jmc]

Ich habe folgendes Problem:

Ich benötige 3 Boxen übereinander mit 100% Breite und die Boxen oben und unten sollen je eine Höhe von exakt 80px haben. Die mittlere Box soll danach auf 100% ergänzen.

Ist das ohne absolute Positionierung und ohne Tabellen möglich?
Ich suche seit langem im Internet nach "fensterfüllendes Layout" und Ähnlichem, aber alles was ich dort finde ist entweder mit Javascript, Tabellen oder min/max-width gemacht.

MfG

JMC

[prego]

<div style="height: 80px;"></div>
<div style="height: 100%;"></div>
<div style="height: 80px;"></div> 

nur ne idee...

[jmc]

wäre ja schön....

100% sind 100% des eltern-Elements und dann ist die Seite 100%+160px hoch.

[Damian1984]

hm unten ne box mit -160px und es könnte funtzen

[jmc]

Ist das ein Witz, oder wie meinst du das?

[prego]

<div id="content" style="height: 100%;">
  <div id="top" style="height: 80px;">
    oben
  </div>

  <div id="bottom" style="position: absolute; height: 80px; width: 100%; bottom: 0;">
    unten
  </div>
 </div> 

dann halt so

tested -> funzt...

//edit:
nee, das es is doch noch nicht ganz....

[jmc]

@ prego

Du hast recht mit absoluter Positionierung geht es indem man z.B. sowas macht:

<div id="content" style="height: 100%;padding-top:80px;">
 <div id="top" style="height: 80px;position:absolute;top:0px;">
  oben
 </div>
 blablabla
</div>

Aber wie oben geschrieben möchte ich gerne wissen ob es ohne absolute Positionierung möglich ist.

[prego]

i know

aber da fehlt dir ja jetzt noch das untere div...
oben das div ist ja kein prob...

[jmc]

Das untere ist ja kein grösseres Problem (ich dachte das sei dann klar)

<div style="height: 100%;padding-top:80px;padding-bottom:80px;">
 <div style="height: 80px;position:absolute;top:0px;z-index:50;">
  oben
 </div>
 blablabla
 <div style="height: 80px;position:absolute;bottom:0px;z-index:50;">
  unten
 </div>
</div>

ich werde wohl für diesen Fall mein Tabellen-Layout behalten, wenn es keine sinnvolle Möglichkeit gibt....

Vielen Dank auf jeden Fall!

[prego]

Bei deiner Lösung hast du aber das Problem, das der eigentliche Inhalt hinter dem top und bottom div liegt - oder seh ich das falsch.

füll die seite mal mit blindtext...

[jmc]

nö, stimmt der z-index sollte nicht sein... war wohl gerade etwas verwirrt dabei...