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

[Matthias Apsel]

Om nah hoo pez nyeetz, keyboarder!

Für eine gemeinsame Höhe der 3 unteren Elemente lautet dein Suchbegriff fauxcolumns oder der SELFHTML-Artikel "Grundlagen des Spaltenlayouts mit CSS" oder auch http://de.selfhtml.org/css/layouts/.

Für das Höhenproblem

#my_elem  
{  
  min-height: -moz-calc(100%-100px);  
  min-height: calc(100%-100px);  
}

Für Browser, die das nicht können, hilfst du mit JS nach oder setzt die Höhe auf einen dir genehmen Prozentwert.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

#my_elem

{
  min-height: -moz-calc(100%-100px);
  min-height: calc(100%-100px);
}

  
Nein, so nicht. Sondern mit Leerzeichen:  
  
~~~css
#my_elem  
{  
  min-height: -moz-calc(100% - 100px);  
  min-height: calc(100% - 100px);  
}

“Note that the grammar requires spaces around binary ‘+’ and ‘-’ doperators.” [CSS3-VALUES §8.1]

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Nein, so nicht. Sondern mit Leerzeichen:

#my_elem

{
  min-height: -moz-calc(100% - 100px);
  min-height: calc(100% - 100px);
}

  
Grmpf, so natürlich auch nicht! Sondern mit Vendor-Präfixen für alle Browser, die das Feature [unterstützen](http://caniuse.com/calc) (oder in näherer Zukunft werden):  
  
~~~css
#my_elem  
{  
  min-height: -moz-calc(100% - 100px);  
  min-height: -webkit-calc(100% - 100px);  
  min-height: calc(100% - 100px);  
}

DON’T BREAK THE WEB!

Evtl. auch noch -o-Präfix; -ms- scheint nach der Tabelle nicht erforderlich zu sein, da IE das ab 9 unpräfixt unterstützt.

Qapla'

[keyboarder]

@All

Hoppenla... Ich wusste nicht, dass man in CSS mit calc auch rechnen kann. Werde das gleich mal ausprobieren. Vielen Dank.

Da zeigt sich wieder: Man kann alt werden wie eine Kuh, man lernt immer noch was dazu...

Gruß,

Keyboarder

@@Gunnar Bittersmann:

nuqneH

Nein, so nicht. Sondern mit Leerzeichen:

#my_elem

{
  min-height: -moz-calc(100% - 100px);
  min-height: calc(100% - 100px);
}

>   
> Grmpf, so natürlich auch nicht! Sondern mit Vendor-Präfixen für alle Browser, die das Feature [unterstützen](http://caniuse.com/calc) (oder in näherer Zukunft werden):  
>   
> ~~~css

#my_elem  

> {  
>   min-height: -moz-calc(100% - 100px);  
>   min-height: -webkit-calc(100% - 100px);  
>   min-height: calc(100% - 100px);  
> }

DON’T BREAK THE WEB!

Evtl. auch noch -o-Präfix; -ms- scheint nach der Tabelle nicht erforderlich zu sein, da IE das ab 9 unpräfixt unterstützt.

Qapla'