div height: Resthöhe des bodys

[B2F]

Hi,

ich habe ein Problem, dass ich nicht lösen kann.
Wie auf dem verlinktem Bild zu erkennen, gibt es 3 Kästen, welche 3 untereinander liegende Divs in einem body darstellen sollen.
Der Body hat die höhe 100%, die Außendivs je 100px.
Das rote, mittlere Div soll nun die _Resthöhe_ bekommen.
So ohne weiteres ist das anscheinend ja nicht möglich, da ich ja nicht height: 100% angeben kann, dann steht meine seite 200px heraus..

Gibt es dafür irgendwelche tollen Hacks die zumindest in den meisten Browsern funktionieren? Oder vielleicht gibt es ja sogar eine valide Variante ;)
Weil auf ein Tabellenlayout habe ich keine Lust..
Danke schonmal!

Gruß,
-B2F

[cygnus]

Hallo :)

Mir fällt da nur "position: abolute" ein.

#oben  {position: absolute; top: 0; width: 100%; height: 100px; }
#mitte {position: absolute; top: 100px; bottom: 0; width: 100%; }
#unten {position: absolute; bottom: 0; width: 100%; height: 100px; }

mfg
cygnus

[B2F]

#oben  {position: absolute; top: 0; width: 100%; height: 100px; }
#mitte {position: absolute; top: 100px; bottom: 0; width: 100%; }
#unten {position: absolute; bottom: 0; width: 100%; height: 100px; }

Hmm, dann sind unten 100px von #mitte nicht mehr sichbar :(

Gruß

[cygnus]

Hallo :)

Hmm, dann sind unten 100px von #mitte nicht mehr sichbar :(

Ja, das geht so nicht.
Nachdem ich jetzt mal den vorher nicht beachteten Scrollbalken bewegt habe, ist noch viel mehr von #mitte sichtbar als einem lieb sein kann.

mfg
cygnus

[cygnus]

Hallo :)

Nachfrage:
Wass soll denn überhaupt in die mittlere Box hinein?
Soll das untere Div stets auf dem Bildschirm sichtbar sein,
oder soll es bei viel Inhalt mit der länger werdenden mittleren Box nach unten wandern?

mfg
cygnus

[Karin]

Hi,

er möchte einen fixen Header und Footer haben und das Inhalts-Div scrollen.
Sagt er jedenfalls... ;)

LG

[cygnus]

Hallo :)

er möchte einen fixen Header und Footer haben und das Inhalts-Div scrollen.

Habe ich überlesen.
Na dann muss er fixed einsetzen für Header und Footer und die Mitte entsprechend anpassen.

Gute Nacht, Karin
cygnus

[Karin]

Hi,

das ist doch ein ganz einfaches Header-Content-Footer Layout. Da gibt's dementsprechend einfache Lösungen zu finden, z.B. mit den Suchbegriffen css layout 100% höhe

LG

[B2F]

Hi,

das ist doch ein ganz einfaches Header-Content-Footer Layout. Da gibt's dementsprechend einfache Lösungen zu finden, z.B. mit den Suchbegriffen css layout 100% höhe

LG

Habe nichts passendes gefunden.
Ich habe mir zwar eben nochmal ein ähnliches Beispiel angesehen, aber bei mit ist das Problem, dass ich den "content" auf 100% brauche, weil ich ein overflow:scroll einsetzen will.
Das Beispiel: hier

[Karin]

Hi,

na, dann schau Dir mal Stu Nicholls' Methode an.

LG

[B2F]

Hi,

na, dann schau Dir mal Stu Nicholls' Methode an.

LG

Klasse, das ist exakt das, was ich wollte!
Habs sogar schon umgesetzt und es funktioniert.
Habe mit meinem Design zwar momentan noch ein paar IE7-Probleme, da auch der 7er durch das anführende Kommentar in den Quirksmodus geschickt wird, aber das bekomm' ich schon hin ;)

Gruß

[suit]

Gibt es dafür irgendwelche tollen Hacks die zumindest in den meisten Browsern funktionieren? Oder vielleicht gibt es ja sogar eine valide Variante

auch wenn du das nicht hören willst, dein vorhaben ist allgemein defekt, du versuchst etwas umzusetzen, was bei print-layouts durchaus sinnvoll ist, am monitor aber fehl am platz - es nervt besonders auf pivot-monitoren

wenn doch, könnte dich ein
valider, defekter ansatz nach deinen wünschen interessieren

wenn du mit den konsequenzen leben kannst, dass du benutzer mit hohen viewports nervst, dann kannst du diese lösung umsetzen (url aus dem screenshot rauslesen)

Weil auf ein Tabellenlayout habe ich keine Lust..

das ist auf jeden fall nicht notwendig, ja