• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

3-spalter funktioniert, aber wie höhe immer auffüllen

Torsten.E

Neues Mitglied
Ich habe einen 3-spalter mit Header und Footer Bereich.
Jetzt will ich aber, dass der mittlere Bereich immer die max. zur Verfügung stehende Höhe ausfüllt.

HTML:
<html>
<body>
<style>
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
div#header {
background-color: yellow;
z-index: 1;
width: 100%;
height: 30px;
}
div#footer {
position: absolute;
bottom: 0px;
z-index: 2;
background-color: yellow;
width: 100%;
height: 30px;
}
div#container {
z-index: 3;
}
div#center {
z-index: 6;
background-color: blue;
}
div#left {
z-index: 4;
float: left;
width: 100px;
background-color: red;
}
div#right {7
z-index: 5;
float: right;
width: 100px;
background-color: red;
}
</style>
<div id="header">Kopf</div>
<div id="container">
<div id="left">Links</div>
<div id="right">Rechts</div>
<div id="center">Mitte</div>
</div>
<div id="footer">Fu&szlig;</div>
</body>
</html>
 
Wenn ich z.b. im "container" height: 100% eintrage, dann habe ich den Effekt, dass der "container" 100% Bildschirmhöhe hat. D.h. der Footer wird unten aus dem Bild geschoben.

Ich will aber, dass der "container" praktisch
height: 100% - 30px (header) - 30px (footer)
hat.
 
100% -30px - 30px kannst du meines Wissens nach nicht machen.

du koenntest aber alle 3 angaben in em machen oder alle 3 in %.

100%-15%-15% = 70%
 
du koenntest aber alle 3 angaben in em machen oder alle 3 in %.

100%-15%-15% = 70%

Ja, so müsste das eigentlich funktionieren.
Allerdings musst du dann - für den Fall, dass du sehr viel Inhalt hast - noch die Eigenschaft overflow (overflow: scroll; ) hinzufügen, damit es in den einzelnen Browsern keine Probleme gibt und der Inhalt nicht über den Rand der Box läuft.

Hier findest du zu dieser Eigenschaft weitere Informationen: http://www.css4you.de/overflow.html
 
Wenn ich z.b. im "container" height: 100% eintrage, dann habe ich den Effekt, dass der "container" 100% Bildschirmhöhe hat. D.h. der Footer wird unten aus dem Bild geschoben.

Ich will aber, dass der "container" praktisch
height: 100% - 30px (header) - 30px (footer)
hat.

Hallo Torsten,

gib dem Container:
Code:
position:relative;
min-height:100%;
height:auto !important;
  height:100%;
dem Inhalt gibst Du oben und unten einen Abstand entsprechend Deinem
Header und Deinem Footer, damit diese den Inhalt nicht verdecken...
Anschließend positionierst du Header und Footer absolut:

Code:
#header {
position:absolute;
top:0;
}
#footer {
position:absolute;
bottom:0;
}
Grüße
Bernhard
 
Zurück
Oben