[CSS] Höhe voll ausnutzen

[MrToiz]

Hi,
ich habe derzeit folgendes Problemchen:
Ich möchte gerne ein div-basiertes Layout erstellen, das die komplette Bildschirmfläche füllt, jedoch auch nicht mehr (d.h. das Browserfenster an sich soll scrollbar-frei bleiben, evtl. können die einzelnen divs mittels overflow:auto Scrollbars erzeugen).
Ersteinmal eine kleine Skizze:

Den Header hab ich bereits hinbekommen (welch Herausforderung...) und die linke Spalte habe ich auch schon, allerdings weiß ich nicht, wie ich es hinbekomme, dass dort die Menü-div exakt so hoch ist wie möglich (d.h. dadrunter ist noch der Platz für das Impressum, sonst nix).

Auf Frames würde ich gerne verzichten und bevor ich das ganze jetzt mit Tabellen mache (wogegen aus anderen Gründen eigentlich auch nichts sprechen würde), wollte ich erst nochmal fragen, ob nicht irgendjemand eine Lösung weiß.

Achso, bisheriger Code:

#header {
	border-bottom: 2px solid black;
	height: 100px;
	position: relative;
	z-index: 10;
}

#leftframe {
	border-right: 2px solid black;
	width: 250px;
	height: 100%;
	position: relative;
	top: -102px;
	float: left;
	z-index: 1;
}

/* Klappt leider nicht, weil dann die Menü-div noch
 einmal so hoch ist wie das gesamte Fenster */
#leftmenu {
	height: 100%;
}

Die rechte Hälfte (Content) soll erstmal egal sein...


Vielen Dank,
MrToiz

 

[ZeroCCC]

Das geht ganz einfach mit position: absolute; und mit top, bottom, left, right "verankerst" du die Seiten einfach nur. Zb dem Menü gibst du left: 0; width: 200px; bottom: 20px; dem Impressum left: 0 bottom: 0; height: 20px; width: 200px; und dem Content top: 0; bottom: 0; left: 200px; right: 0;. Somit skaliert der Browser die flächen immer passend. Man kann auch mit Prozenten arbeiten wenn man will.

 

[MrToiz]

Das klappt leider auch nicht
Ist das Menü (es handelt sich um ein JS-Treemenü) eingeklappt, braucht also nicht den ganzen Platz, klebt es unten am "Impressum" statt oben an der Überschrift "Untermenü". Ist es dann ausgeklappt, klebt es immernoch unten, kennt aber nach oben keine Grenze, überlappt also die Überschrift

Und auch mit der Tabellen-Umsetzung habe ich so meine Probleme...
Der IE7 weigert sich, die Tabelle für "Untermenü" und "Impressum", die ich in der linken Spalte untergebracht habe, auf 100% Höhe zu strecken, wenn diese nicht ausgenutzt wird (also bei eingeklapptem Menü).
Dafür kriegt es weder der IE7 noch der FF2.0 hin, bei ausgeklapptem Menü die Scrollbars nur für diese eine Tabellenzelle einzublenden Ich muss also wieder das gesamte Dokument scrollen...

edit: So langsam bin ich wirklich am verzweifeln, ich befürchte tatsächlich, dass ich auf Frames ausweichen muss
Bin jetzt aber erstmal bis mindestens Mittwoch weg...

 

[Moloc]

Das Problem mit dem scrollen solltest du mit "overflow: auto" lösen können. Dies musst du jedem element zuweisen, das größer werden könnte.

Wenn du direkt nur das von ZeroCCC verwendet hast, dann benötigst du noch beim menü ein "top: 100px" oder ähnliches.

Am besten postest du mal den Code, den du bisher hast, sonst kann man hier nur schlecht rumraten.

 

[MrToiz]

Wenn du direkt nur das von ZeroCCC verwendet hast, dann benötigst du noch beim menü ein "top: 100px" oder ähnliches.

Genial, das war's! Zumindest im FF läuft's schon, hab aber im Moment noch keine Zeit es auch im IE zu testen....berichte dann vorraussichtlich morgen!

Und wenn's nicht klappt, gibt's auch ein Beispiel, versprochen (auch wenn das zusätzliche Arbeit ist, da das Treemenu einen lokalen Verzeichnisbaum darstellt, den ich nicht unbedingt jedem präsentieren möchte)

 

[ZeroCCC]

Genial, das war's! Zumindest im FF läuft's schon, hab aber im Moment noch keine Zeit es auch im IE zu testen....berichte dann vorraussichtlich morgen!

Im IE klappts nicht... aber dafür gibts notfalls ja https://dean.edwards.name/IE7/.