Seitenlayout

[keyboarder]

Hallo,

es gibt schon eine Menge Einträge zu diesem Thema, aber für mein Layout-Problem habe ich trotzdem keine Lösung gefunden.

Zunächst möchte ich sagen, dass ich eine Lösung gefunden habe, aber leider nur mittels JavaScript, d. h. ich verändere die Div-Bereiche nach dem Aufbau so, dass es optimal passt. Aber das finde ich nicht besonders schön und ich stelle mir (bzw. Euch) die Frage, ob das nicht auch mit reinem CSS lösbar ist.

Das Layout sieht so aus:

+------+---------------------------------------+---------+
| Logo |             Header                    | Counter |
+------+---------------------------------------+---------+
|      |                                       |         |
| Nav  | Content                               | Sidebar |
|      |                                       |         |
+------+---------------------------------------+---------+

Das sind übrigens alles DIV-Bereiche. Mit einer Tabelle würde es wahrscheinlich gehen, aber für das Layout möchte ich das eigentlich nicht.

Die Logo-Nav-Spalte hat eine fixe Größe, die Counter-Sidebar-Spalte ebenfalls, die Header-Content-Spalte soll dynamisch maximal groß sein.

Die Logo-Header-Counter-Ziele ist fix 100px hoch, die Nav-Content-Sidebar-Zeile soll dynamisch maximal hoch sein.

Alle Div-Bereiche haben overflow:hidden, außer dem Content-Bereich, bei dem auto definiert ist, so das man den Inhalt scrollen kann, alles andere aber immer stehen bleibt.

Die horizontale Maximierung der Header-Content-Spalte ist kein Problem und kann ich mit float für die beiden anderen Spalten regeln.

Mein Problem ist, die maximalierte Höhe der Nav-Content-Sidebar-Zeile. Ich hab 100 verschiedene Variationen versucht, hat leider alles nichts gebracht. Schließlich habe es mit JS gelöst, in dem ich die Zeile mit 100px erstelle und danach berechne, wie hoch sie maximal sein darf und dies dann setze. (Wen es interessiert: Im Prinzip setze ich die drei Zellen auf die entsprechende Größe mit $("#NAV, #CONTENT, #SIDEBAR").height(windowsHeight - 100). Noch ein paar Abfragen wegen IE, aber im wesentlichen ist es das). Das muss ich dann auch wieder bei einem Resize des Browsers neu berechnen.

Die Frage ist, gibt es eine einfachere bzw. elegantere Lösung mittels CSS, die mir die JS-Berechnung erspart? Wie gesagt, es tut, aber ich finde die Lösung nicht besonders schön. Hat jemand eine Idee?

Gruß,

JR