Hi,

ich möchte ein in gewisser weise flexibles Layout machen. Ich habe drei div-container (header, content, footer), von denen zwei (header, footer) eine feste Größe haben. Der content-Container soll sich je nach Auflösung über die ihm zur verfügung stehende Höhe ausbreiten (sodass nicht gescrollt werden muss). Allerdings soll er durch min-height und max-height eingeschränkt sein.

Hat jemand eine Idee, wie ich das am Besten realisieren kann?

MfG,
Precog.

edit: In dem content-Container befindet sich ein Flash-Film. Es gibt also kein Bild, das den Container je nach Nöten in die Höhe strecken kann. Die swf-Datei nimmt sich lediglich den Platz, den der Container bietet. Also muss sich der Container von alleine die maximale Größe aneignen.

Ungefähr so?

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<style type="text/css">   html,body {     width: 96%;     height: 95%; } #header {     height: 100px;     border: solid; } #content {     height: 80%;     border: solid;     min-height: 400px;     max-height: 800px; }   #footer {     height: 50px;     border: solid; } </style>   <div id="header">Header.....</div> <div id="content">Content.....</div> <div id="footer">Footer.....</div>

... so einfach kann das Leben sein .

Eine Lösung, bei der sich die drei Container zu 100% der Höhe/Auflösung zusammenaddieren lassen ist wahrscheinlich ohne js oä nicht möglich, richtig?

Eine Frage noch: Warum nicht einfach 100% für body width und height?

Danke!

Zitat von Precog

Eine Frage noch: Warum nicht einfach 100% für body width und height?

Naja, das muss man nicht machen, aber wenn ich 100% mache, kommen manchmal so komische Scrollbanken, obwohl noch kaum Inhalt drauf ist (jedenfalls beim IE).
Deshalb hab ich paar Prozent Puffer gelassen.

Hi,

schau dir hierzu mal mein CSS-Tutorial CSS-Layout mit 100%-Höhe, und darin die Variante "Modell mit Header und Footer" an, die sauberer gelöst ist, als ewgenis Versuch mit dem Puffer, denn Äpfel (%) und Birnen (px) lassen sich nunmal nicht zu 100% addieren.

In meinen Vorlagen teilt sich der Content-Bereich zwar in drei Spaltenblöcke auf, aber diese lassen sich ohne weiteres darin entfernen.

mfg Maik