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

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

  1. 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).

    Der Artikel Footer aller Art - feststehende Elemente realisieren, speziell der Abschnitt Feststehende Kopf- und Fußzeile zeigt, was browserübergreifend so möglich ist. Da geht es zwar um fixierte Kopf- _und_ Fußbereiche. Den Fußbereich kannst Du dann ja aber einfach weglassen.

    viele Grüße

    Axel