Weblog CSSEC

Neulich habe ich mir die Frage gestellt, wie man ohne “position = absolute” eine Seite hinbekommt, die sich immer an die Größe des Browser-Fensters anpasst, dabei eine Kopf- und eine Fußzeile erhält, wobei die Fußzeile immer am unteren Ende des Bildschirms ist.
Genauso stellt sich regelmäßig die Frage, wie man z.B. ein zweispaltiges horizontales Layout bekommt, bei dem eine Spalte eine fixe, die andere eine dynamische Größe bekommt, so dass auch hier bildschirmfüllend gelayoutet wird.

Sicherlich kann man das mit Tabellen erreichen. Allerdings haben Tabellen an bestimmten Punkten jedoch ihre Eigenarten und es heißt immer, dass man möglichst wenig mit den unflexiblen HTML-Tabellen arbeiten soll.
Daher möchte ich das Layouting komplett mit DIVs realisieren. Eine neue Webapplikation, die ich gerade erstelle, soll dabei folgendes komplexes Layout haben:

Als ich damals den Cutworks-Webshop erstellt habe, habe ich zur Positionierung der Fußleiste eine absolute Positionierung genutzt. Dies hat zwar funktioniert, jedoch mehr schlecht als recht. Speziell wenn das Browser-Fenster verändert wurde, kam dies nicht immer mit.

Nach einiger Recherche im Netz habe ich etwas zu tabellenorientierten DIV’s gefunden, die ich hier nun beschreiben möchte.
Ausgangspunkt ist ein Layout, dass aus folgenden Bereichen besteht:

———————————————————————————————————–
header – Bereich mit fixer Größe
———————————————————————————————————–
Textbereich – flexible Größe | info-Bereich |
horizontal und vertikal | horizontal fixe |
| vertikal flexibel |
———————————————————————————————————–
footer – Bereich mit fixer Größe
———————————————————————————————————–

Um das zu erreichen definieren wir 7 DIV-Bereiche:

Das Div mit der Klasse fullPanel dient dabei dazu, den kompletten Bildschirm auszufüllen. Der mittlere Bereich wird noch einmal unterteilt und es wird noch einmal ein separates “mainTable”-Element angelegt.
Warum das so ist, dazu später.

Auf Basis dieses Layouts erfolgt die Magie im CSS. Hintergrund ist das Display-Attribut, für das es nicht nur, block, inline gibt, sondern auch die Werte: table, table-row, table-column und table-cell. Mit Hilfe dieser Werte wird das Layout zum Kinderspiel. Im Endeffekt verhalten sich bei Setzen der entsprechenden Werte die Divs dann fast wie Tabellen.

Die fullPanel-Klasse wird bildschirmfüllend mit 100% Höhe und 100% Breite angelegt und mit der table-Eigenschaft belegt:

  .fullPanel {
       display: table;
       width: 100%;
       height: 100%;
   }

Header, Footer und mainContent-Divs sind jeweils table-rows. Dabei werden header und footer mit einer entsprechenden Pixelgröße angelegt, die restliche Größe soll der mainContent-Bereich erhalten. Dazu wird die Größe des mainContent-Bereichs auf 100% gestellt.

   .header {
      	display: table-row;
        height: 120px;
        width: 100%;
   }
 
  .footer {
      display: table-row;
      height: 100px;
      width: 100%;
   }
 
  .mainContent {
     height: 100%;
     display: table-row;
     width: 100%;
  }

Die Width-Angabe ist prinzipiell nicht nötig, da diese entsprechend des Vater-Divs bestimmt wird. Aus Lesbarkeitsgründen habe ich diese Attribute jedoch untergebracht.

Nun zum mainTable. Damit der mittlere Bereich nicht nur in der Höhe, sondern auch in der Breite flexibel ist, wird innerhalb des table-Rows erneut ein Div angelegt, dass quasi wiederum als Layout-Tabelle für das linke und rechte Panel fungiert. Es bekommt eine Höhe und eine Breite von 100% und erhält wiederum table als display-Wert.

  .mainTable {
     display: table;
     width: 100%;
     height: 100%;
  }

Das linke und rechte Panel werden nun innerhalb der Tabelle angeordnet. Merkwürdigerweise funktioniert hier nicht table-column, sondern nur table-cell als display-Wert.
Der rechte Info-Bereich erhält eine Breite von 250px. Die verbleibende Breite wird dann dem linken Panel zugeordnet.

   .leftPanel {
        display: table-cell;
        width: 100%;
    }
 
   .rightPanel {
       display: table-cell;
       width: 250px;
   }

Damit die Bereiche korrekt dargestellt werden können, muss in jedem Panel Inhalt vorhanden sein. Das kann beispielsweise auch ein nbsp sein.