✔ Variable Höhe für Navi-DIV zwischen Kopf- und Fußzeile

Hallo,

ich bastel gerade an einem Layout, in dem Kopf- und Fußzeile sowie Navigation die gleiche (rote) Hintergrundfarbe haben, der eigentliche Inhalt aber weiß hinterlegt ist. Ich will nun, dass das DIV mit der Navigations-Liste (ul) immer die ganze Höhe zwischen Kopf und Fuß ausfüllt, egal wie lang der Inhalt ist. Kopf, Fuss und Navigation sollen sozusagen einen an der rechten Seite offenen aber sonst geschlossenen Rahmen um den Inhalt bilden.

Unter jazzclubtonne.de/ver4 kann man eine Variante sehen mit wenig Text und unter dem Link "[mehr Text]" eben eine mit mehr Text. Bei dieser nun soll das rot hinterlegte DIV der Navigation trotzdem bis zur Fußzeile reichen.

Das DIV mit der Navigation hat die Hintergrundfarbe rot und oben und unten ein padding von 20px, so dass es einen Mindestrand gibt. Ich hab' schon mit der Angabe "100%" experimentiert, was aber nicht sinnvoll ist, da es ja 100% der Bildschirmhöhe und nicht des Zwischenraumes zwischen Kopf und Fuß errechnet.

Mit einer zweispaltigen und einzeiligen Tabelle zwischen Kopf und Fuss wär' das Problem natürlich gelöst. Aber geht das auch irgendwie mit CSS?

Vielen Dank im Voraus.
27apricot

Hallo!

Gebe dem Body die entsprechende Hintergundfarbe (rot).
Der Content sitzt ja sicherlich auch in einer DIV-Box, gebe der auch eine Hintergrundfarbe (weiss).

Gruss Dr Dau

Hallo Dr. Dau,

Vielen Dank für Deine Antwort. Leider bringt auch das nicht das gewünschte Ergebnis. Hab' wohl versäumt zu schreiben, dass natürlich auch der umgekehrte Fall wichtig ist: Wenn nämlich der Inhalt des DIVs "Navigation" höher ist als der des DIVs "Inhalt" (siehe erstes Beispiel), soll die weiße Fläche natürlich trotzdem wenigstens so hoch sein wie die Navigation-Leiste.

Vielleicht ist es ja wirklich ein klassischer Fall für eine Tabelle. Wäre aber natürlich trotzdem fetzig, wenn jemand 'was besseres weiß.

Schöne Grüße
27apricot

Hallo!

So, ich habe mich nochmal dran gesetzt, schau dir mal dieses Ergebnis an.
Evtl. hilft dir dass ja nun weiter.

Gruss Dr Dau

Hallo,

Nochmals vielen Dank an Dr. Dau. Auch wenn das noch nicht ganz das war, was ich brauchte – bei absoluten Positionierungen der DIVs »Navigation« und »Inhalt« wusste ich nicht, wie man noch ein Fußzeilen-DIV darunter bekommt – hat mir das mit den Hintergrundbildern trotzdem weiter geholfen, denn das funktioniert auch bei relativen Positionierungen.

Hier mal der nun fertige Quellcode (XHTML strict + CSS validiert, getestet in Opera 7.54, Firefox 1.0.4, IE6):

Zur Erläuterung:
Die Grafik »bg.gif« (siehe Anhang) hat die Farbe, die in den DIVs #kopf, #navi und #fuss als Hintergrundfarbe definiert ist und muss die Breite des Navi-DIVs einschließlich des Rechts-/Links-Paddings haben (im Beispiel ist die Grafik 140px breit von 120px DIV-Breite + 10px padding an beiden Seiten).

Das DIV #inhalt bekommt nun eben diese Hintergrundgrafik mit dem entscheidenden Hinweis, dass diese nur vertikal, nicht aber horizontal wiederholt werden soll. Dieses DIV darf keinen Außenrand (margin-left) an der linken Seite, muss aber einen entsprechend breiten Innenrand (padding-left) – also mindestens 140px – haben. Ist nun das DIV #inhalt länger als das DIV #navi, sieht man unterhalb des letzteren die Hintergrundgrafik des Inhalts.

[edit] Zuerst hatte auch für das DIV #navi »bg.gif« als Hintergrundbild definiert. Das ist jedoch nicht notwendig, wenn man für #navi die Hintergrundfarbe definiert.

Schöne Grüße
27apricot.

Hallo!

Freud mich dass ich dir zumindest den gewissen "Anschubser" geben konnte.
Ein individuelles Layout kann man schlecht erstellen da man ja nie weiss wie der jenige sich seine Seite letztendes vorstellt.
Dass ist ja aber auch nicht der Sinn des Forums.
Bei mir drehte es sich auch darum, dass das Menü immer von ganz oben bis ganz unten gehen sollte.
Da dieses Problem offenbar häufig auftritt aber wohl niemand eine Lösung weiss, habe ich mich dann doch nochmal damit befasst.
Mittlerweile sind 754 Hits auf mein Thread und nur eine vermeindliche Lösung, die sich jedoch nach kurzen Tests als unbrauchbar herausstellte.

Natürlich kann man für div#navi auch nur eine Farbe nehmen, hatte ich zuerst auch.
Dann kann die Grafik im div#inhalt aber auch nur eine unifarbende Grafik sein.
Wer allerdings für beide DIV's Grafiken verwendet, kann dann auch ein gemusterten Hintergrund (z.b. rosa Schweinchen auf himmelblau *sfg*) machen.
Ansonsten sieht deine Seite auf meinen Systemen OK aus, nur mit dem IE 5.0 unter Win98 SE habe ich sie mir nicht angesehen (dazu hätte ich mich wieder zum Monitor umstöpseln unter den Tisch zwängen müssen).

Gruss Dr Dau