Nils3: Div höhe so einstellen, dass sie den verbleibende höhe einnimmt

Beitrag lesen

Hallo,

ich habe folgendes Problem.  Die Seite ist in 2 divs aufgeteilt.  Eins (A) macht den Seitenkopf, eins (B) den Inhalt.  Nun hätte ich gerne dass das A div eine fixe höhe hat, und das B div den Rest des Browserfensters einnimmt (i.e. bis zum unteren Bildschirmrand).

Was ich versucht habe ist Folgendes:

<html>  
  
 <head>  
  <title></title>  
 </head>  
  
 <style type="text/css">  
   body {  
    margin: 0px;  
   }  
   #a {  
    height: 200px;  
    background-color: blue;  
   }  
   #b {  
    height: 100%;  
    background-color: red;  
   }  
 </style>  
  
 <body>  
  <div>  
   <div id="a">a</div>  
   <div id="b">b</div>  
  </div>  
 </body>  
</html>

Jedoch rechnet der die "height:100%" von B nicht auf die verbleibende Höhe, sondern auf die gesamte Höhe, und so ist B 200px zu groß weil A ja schon 200 pixel einnimmt, und es erscheinen Scrollbars.

Hintergrund: Der Grund warum ich 2 solcher divs haben will ist dass A (der Seitenkopf) fixiert ist, und B (der Inhalt) gescrollt werden kann.  Das erweckt den Eindruck es würden Frames benutzt.  Das fixieren jedoch kann man bisher wegen IE Problemen nur mit solchen Hilfsdivs lösen (laut Selfhtml), daher meine Situation.

Vielen Dank vorab,

Nils