✔ header- und footer größe fix; content rest

[v01pe]

hallo!

ich habe folgendes problem:
ich möchte das design einer seite so umsetzen:

es gibt einen header und einen footer (beides div's) die eine fixe höhe haben, also zB je 150px;

in der mitte soll der contentbereich sein, dessen höhe auf den restlichen platz aufgespannt wird.

ein kleines bsp:

das fenster ist 800px hoch, header und footer haben je 150px..
das content bereich soll also 500px bekommen, was ich allerdings nicht so hinein schreiben kann, da dies ja für alle fensterhöhen funktionieren soll.

habs mit höhe 100% für den content versucht (html/body habe ich auch auf height: 100%; gesetzt), das führt allerdings dazu, das der contentbereich genau so groß ist wie das fenster und den footer nach unten aus dem fenster schiebt

hat jemand einen tipp, wie ich das (evtl. auch anders) umsetzen kann, ohne tables zu verwenden?

 

[Maik]

Hi,

mein CSS-Tutorial CSS-Layout mit 100%-Höhe und darin die Variante "Modell mit Header und Footer" (im ZIP-Attachment ist das die Vorlage "3cols_header_footer.htm") dürfte dir hier weiterhelfen.

Möglicherweise kommt dir aber auch die Technik des Tutorials Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken entgegen, falls der Contentbereich scrollbar sein soll.

Und beachte bitte unsere Netiquette (Nr.15) bzgl. deiner durchgängigen Kleinschreibung - vielen Dank!

mfg Maik

 

[v01pe]

Hi!

Danke für deine Tipps, aber beides war nicht genau das was ich suchte. Ich hab's jetzt folgendermaßen gelößt:

Wenn die Seite geladen ist und wenn das Fenster "resized" wird, dann rufe ich folgenden Javascript-Code auf:

function adjustSize()
{	
	var minHeight = 300;
	
	var div_menu = document.getElementById("menu");
	var div_bottomspacer = document.getElementById("bottomspacer");

	var lostHeight = div_menu.clientHeight + div_bottomspacer.clientHeight;
	var contentHeight = Math.max(document.documentElement.clientHeight - lostHeight, minHeight);

	var div_content = document.getElementById("content");
	div_content.style.height = contentMainHeight + "px";
}

window.onresize = function()
{
	adjustSize();
}

Da ich für die Seite sowieso Javascript benötige und ich mit dieser Variante am meißten Einfluss auf die Darstellung behalte, habe ich mich für dafür entschieden.