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

[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:(