Im Gegensatz zu Tabellen ist es mit einem rein CSS-basierten Layout nicht mehr ohne weiteres möglich eine Seite zu erstellen, die die volle Browserhöhe einnimmt.
Ich möchte deshalb eine Methode vorstellen mit der es möglich ist, ein zweispaltiges CSS-Layout mit 100% Höhe und einer variablen Fußzeile zu erstellen. Die vorgestellte Methode ist vollkommen standardkonform und funktioniert in allen gängigen Browsern.

Damit das Layout die volle Browserhöhe einnimmt, müssen ein paar Vorraussetzungen erfüllt sein. Die HTML-Elemente html und body müssen eine Höhenangabe von 100% bekommen und margin und padding müssen auf 0px gestellt werden. So sieht das Ganze in CSS aus:

html, body
{ 
  height: 100%; 
  padding: 0px; 
  margin: 0px; 
}

Als nächster Schritt müssen nun die benötigten div-Container in HTML definiert werden. Ich habe für dieses Beispiel vier Container verwenden. Einen Wrapper, eine linke Spalte, eine rechte Spalte und die Fußzeile.

<div class="wrapper">
  <div class="left"> </div>
  <div class="right"></div>
  <div class="footer"></div>
</div>

Nun werden die CSS-Eigenschaften für die div-Container festgelegt. Der Wrapper muss die Angabe min-height: 100% erhalten. Wir wollen diesen Container auch noch gleich im Fenster zentrieren, was über die Angaben position: absolute; left: 50%; width: 800px; margin-left: -400px; geschiet. Der negative margin-left-Wert muss immer der Hälfte der Containerbreite entsprechen.

div.wrapper
{ 
  position: absolute; 
  left: 50%;
  margin: 0px 0px 0px -400px; 
  width: 800px; 
  min-height: 100%; 
}

Als nächstes werden die beiden Spalten bearbeitet. Dazu sind die Angaben der Breiten nötig (in diesem Fall 180px und 580px mit 10px padding)%. Um die Container nebeneinander zu platzieren werden die Eigenschaften position: relative; float: left; verwendet.

div.left
{
  position: relative;
  float: left;
  background-color: #bfbfbf;
  width: 180px;
  padding: 10px;
}

div.right
{
  position: relative;
  float: left;
  width: 580px;
  padding: 10px;
}

Nun fehlt nur noch die Fußzeile. Diese wird absolut innerhalb des Wrappers positioniert. Mit der Eigenschaft bottom: 0px; zwingt man sie dazu, sich immer am unteren Rand des Browserfensters zu befinden. Zu beachten ist, dass dieser Container die beiden div-Container left und right überlagern würde. Deshalb wird bei diesen Containern noch ein margin-bottom definiert, das den Wert Höhe der Fußzeile + 10px hat.

div.footer
{
  position: absolute;
  bottom: 0px;
  width: 800px;
  height: 30px;
  background-color: #000000;
  clear: both;
}

So weit so gut, sehen wir uns nun einmal die erste Demo an.
Schaut doch eigentlich schon ganz gut aus, allerdings fällt auf, dass die linke Spalte nicht die volle Fensterhöhe einnimmt. Das ist mit einem kleinen Trick möglich, man bindet im Wrapper-Container eine Hintergrundgrafik mit den benötigten Farben ein. Dadurch sieht es so als, als würde die linke Spalte auch eine Höhe von 100% haben. Dazu gibt es die zweite Demo.

Damit fehlt nur noch die Optimierung dieses Beispiels für den Internet Explorer 6.0. Die leichteste und auch schönste Variante ist es Conditional Comments zu verwenden. Folgender CSS-Code ist dafür notwendig:

<!--[if lte IE 6]>
<style type="text/css">
div.wrapper {
  height: 100%;
}    

div.footer {
  bottom: -1px;
}
</style>
<![endif]-->

Damit sollte dieses kleine Beispiel nun in allen gängigen Browsern funktionieren. Zum Abschluss noch die finale Demo.