{{indexmenu_n>100}}

====== kukkis: 2 Spalten, feste Breite, var. Höhe ======
[[http://forum.phpwcms.org/viewtopic.php?p=111983#p111983]] \\
- **Autor:** kukki  //(Update: 24.06.09)//

===== Anforderung: =====

  * Header soll am obersten Rand der Viewport stehen. (115px)
  * Left und Main sollen optisch nebeneinander stehen
  * Der Scrollbalken soll dynamisch im Main erzeugt werden, falls gewünscht, wie im Beispiel.
  * Footer soll untem im Viewport stehen. (20px)
  * Bei F11-Taste soll die Konstruktion sich diesem Bildschirm automatisch anpassen.  

  * CSS-Code soll konform sein! [[http://www.grosse-strasse-strausberg.de|Live-Beispiel siehe hier]]

Gewählt habe ich eine feste Breite von 980px, so dass 1024 x YYY bedient werden kann.

==== CSS ====

Folgende Lösung hat bisher einem Test standgehalten und ist stabil und mit nachfolgenden Codezeilen CSS-konform:

--> diesen Codeschnipsel in den Header der Vorlage einstellen:

<code header/ Vorlage |h header/ Vorlage |h>
<!--[if lt IE 7]>
  <style type="text/css">
#mainBlock { height: expression((document.body.clientHeight-157) + "px");}
  /* wer auch den #leftBlock bis zum Footer fließen lassen will, sollte die nachfolgende Zeile auch benutzen!
  -->Vorteil: Man kann dem #leftBlock einen eigen spaltengerechten Hintergrund ohne Tricksereien mit Faux Columns verpassen */
#leftBlock { height: expression((document.body.clientHeight-157) + "px");}
  </style>
<![endif]-->
</code>

Soll #leftBlock ebenfalls mit **height: expression** angesteuert werden, damit dieser bis zum footer fließen kann,
ist dieser Block mit **position:absolute** zu behandeln. 
**Eine Empfehlung:** Wenn jemand den IE6 ohne Probleme bedienen will, sollten CSS-Kurzschriften vermieden werden. 
Macht zwar Mühe, aber der IE6 läuft stabil!

<code css |h selbstzentrierende Seite 980px breit, 100% hoch|h>

/* selbstzentrierende Seite 980px breit, 100% hoch*/
html, body {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
    min-width: 100%;     }

/* der komplette Bildschirmbody */
body{
  margin: 0;
  padding: 0;
  overflow:hidden;  /*weg ist der Scrollbalken*/
    }

#container { position: absolute;
       background-color: #006400;
       margin: 0px 0px 0px -490px;
       left: 50%;
       width: 980px;   /* Breite der gesamten Website */
       height:100%;  /* sichtbare Hoehe der Website */ 
       }

#headerBlock {
  height: 115px;
  margin: 0;
  background: #FF9F9F ;
  }

#mainBlock {
  position: absolute;
  background-color: #ffff99;
  top: 115px;
  bottom: 30px;
  right: 0; 
  padding: 5px 15px 5px 5px;
  margin-left: 220px;
  overflow: auto;  /*Scrollbalken nur für den #mainBlock*/
  }

#leftBlock
  {
  position: absolute;
  top: 115px;
  width: 200px;
  bottom: 30px;
  }

#footerBlock {
  position: absolute;
  bottom: 2px;
  text-align: left;
  color: #ffffff;
  width: 980px;
  height: 30px;
  margin: 0;
  padding: 0;
  background-image: url(/picture/Fuss.jpg); 
  background-repeat: repeat-x;
  }
#footerBlock a{ color:#f2f2f2;}
</code>

{{:deutsch:templates:2spalten_feste-breite_var-hoehe_01.jpg?84x120}}

=== Vorlage ===

Im Seitenlayout wird unter **Seitenaufbau:** die Einstellung **[x] CSS DIV** gewählt.

Dann greifen automatisch die folgenden CSS-Klassen aus der frontend.css:

  #container
  #headerBlock
  #mainBlock
  #leftBlock
  #rightBlock
  #footerBlock

In der Vorlage werden folgende Bereiche verwendet: 

  Kopfzeile
  Haupt
  Fußzeile
  links
  rechts

In diesen Bereichen werden die Content-Platzhalter
  {HEADER}
  {CONTENT}
  {FOOTER}
  {LEFT}
  {RIGHT}

verwendet.