Variable mit festen DIVs mixen...

[DoNe]

Hey liebe ATler,

ich hab mal wieder ein kleines Problem im Wald des HTML/CSS!

Ich möchte eine Seite gestalten, die das Browserfenster in der Höhe immer zu 100% ausfüllt.

Dabei soll am oberen Browserrand immer die Navigation mit einer festen Höhe von 80px "kleben" und am unteren Rand immer ein Footer mit einer festen Höhe von 50px.

Der Inhalt dazwischen soll sich jedoch variabel an die Höhe des Browserfesnters anpassen.

Was ist da in der CSS zu tun?

LG,
Done

 

[wdominik]

Also folgende CSS-Stile sollten Dir weiterhelfen:

body {
	margin: 0;
	padding: 80px 0 50px 0;
}

header {
	background: #f00;
	position: fixed;
	height: 80px;
	width: 100%;
	top: 0;
}


footer {
	background: #0f0;
	position: fixed;
	height: 50px;
	width: 100%;
	bottom: 0;
}

Die Farben dienen nur der visuellen Kontrolle des Ergebnisses. Im Body gibst Du den Abstand nach oben und unten per padding an, damit der Inhalt nicht von Kopf- oder Fußzeile überdeckt wird.
Kopf- und Fußzeile gibst Du eine fixe Positionierung (Damit sie auch beim Scrollen auf der gleichen Position bleiben) und die entsprechenden Abmaße. Positioniert wird auf left: 0(px) – das ist aber ohnehin die Voreinstellung und top: 0(px) bei der Kopf- respektive bottom: 0(px) bei der Fußzeile. Die top-Angabe könntest Du ebenfalls weglassen, habe sie jetzt mal zum Verständnis mit reingenommen.