Div den Rest der Seite füllen lassen (relative layout)

[MarkusK]

Hallo ihr Alle!
Ich schreibe im Moment an einer Seite, bei der 4 Div Container horizontal untereinander positioniert sind. Dabei sind alle 100% breit und die höhen werden bei 3 der 4 Div's in Prozent angegeben.

Es sieht also so aus:

  
<div name="container" style="--nicht wichtig--">  
  
   <div name="banner" style="position:relative; top:0; left:0; width:100%; height:20%;">  
   </div>  
  
   <div name="menu" style="position:relative; top:3%; left:0; width:100%; height:10%;">  
   </div>  
  
   <div name="content" style="???">  
   </div>  
  
   <div name="footer" style="positon:absolute; left:0; bottom:0; width:100%; height:50px;">  
   </div>  
  
</div>  

Meine Frage ist, wie ich es schaffe, dass das Content-Div genau den übrigen platz in der Mitte ausfüllt. Problem ist ja, dass zum einen Prozentangaben und zum anderen absolute Höhenangaben verwendet werden. Ich habe schon versucht, den Footer auch mit Prozenten anzugeben, aber ich musste immer eine min-height setzen und damit kann ich auch nicht mehr einfach den differenz Prozentsatz berechnen.
Hat jemand hier eine Idee?

VG Markus

[Der Martin]

Hallo,

horizontal untereinander

du meinst vertikal untereinander. "Untereinander" ist vertikal.

Dabei sind alle 100% breit und die höhen werden bei 3 der 4 Div's in Prozent angegeben.

Und der Bezugswert ist eindeutig definiert? Anders gefragt: Hat das gemeinsame Elternelement eine feste, vom Inhalt unabhängige Höhe? Sonst würde sich hier nämlich die Katze in den Schwanz beißen.

<div name="container" style="--nicht wichtig--">

<div name="banner" style="position:relative; top:0; left:0; width:100%; height:20%;">
   </div>

<div name="menu" style="position:relative; top:3%; left:0; width:100%; height:10%;">
   </div>

<div name="content" style="???">
   </div>

<div name="footer" style="positon:absolute; left:0; bottom:0; width:100%; height:50px;">
   </div>

</div>

  
Aua. Sowas ist heikel.  
Rein von der Logik her ist die Höhe des vierten Containers ja festgelegt, nämlich mit 70% des Elternelements minus 50px. Das rafft ein Browser so indirekt aber nicht.  
  
Das ist einer der wenigen Fälle, in denen ich absolute Positionierung anwenden würde - und zwar für #banner, #menu und #footer, während ich #content entsorgen würde. Stattdessen bekäme #container bei mir ein padding-top von 30% und ein padding-bottom von 50px.  
  
So long,  
 Martin  

-- 
Bis du einen Prinzen findest, musst du viele Frösche küssen.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(