flexibles Layout

[Precog]

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.

 

[chuvak]

Ungefähr so?

<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>

 

[Precog]

... 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!

 

[chuvak]

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.

 

[Maik]

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