Variable Größe des Content-DIV-Containers

[Michael Brandhoff]

Hallo,

ich habe Probleme meine Layoutvorstellungen zu realisieren.
Und zwar möchte ich gerne in meiner Seite ein Header-, ein
Content-, und ein Footer-DIV einbinden. So dass der Header
stets eine fixe Größe aufweist und ganz oben aufzufinden ist.
Der Footer sollte 16px hoch sein und natürlich ganz am Ende
der Seite stehen. Zusätzlich soll der Content-Frame - dessen
Inhalt später mittels eines Iframes dargestellt wird - den
gesamten vorhandenen Platz ausfüllen, abhängig von der Höhe
des Browserfensters.
|------------
|            |  <= Header
|------------|
|            |
|            | <= Content: soll variable Höhe besitzen
|            |
|            |
|____________|
|____________| <= Footer

Hier mein bisheriger CSS-Code:

  
.div_header  
{  
    position:absolute;  
    width:100%;  
    top:0px;  
    height:78px;  
    left:0px;  
    background-color:#BFBFBF;  
}  
.div_content  
{  
    position:absolute;  
    top:78px;  
    left:0px;  
    width:100%;  
    height:100%;  
    background-color:#CECECE;  
}  
.div_footer  
{  
    position:absolute;  
    bottom:0px;  
    left:0px;  
    width:100%;  
    height:16px;  
    background-color:#ABABAB;  
}  

Das Problem bei mir ist, dass automatisch ein Scrollbalken
erscheint, da/und das Content-DIV über den Footer hinaus läuft.

Kann mir einer auf die Sprünge helfen, wo mein Fehler liegt?

Tausend Dank.
Michael Brandhoff

[Cyx23]

Hallo Michael,

Kann mir einer auf die Sprünge helfen, wo mein Fehler liegt?

Wenn das Content-DIV nicht über das Fenster rausgehen soll müßte es bei
einer Höhe von 100% eigentlich mit top:0px; positioniert sein.
Ausserdem können zusätzliche Angaben nötig sein um bei 100% Höhe im Fenster
zu bleiben, also keine  Scrollbalken zu erhalten, zusätzlich kann eine
Höhenangabe von 99 statt 100 % hilfreich sein.

Vielleicht hilft dir der Code dieses Tableless Layout mit min-height 100%
als Anregung weiter, dort sind neben #inhalt mit body>#inhalt und
* html #inhalt Angaben für verschiedene Browser gemacht, um die Internet
Explorer anders zu bedienen (als Weiche sind sonst z.B. conditional comments
möglich).

Grüsse

Cyx23