2 Spalten, feste Breite, var. Höhe

http://forum.phpwcms.org/viewtopic.php?p=111983#p111983
-(Autor: kukki)

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!

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:

header/ Vorlage

<!--[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 ein eigenes Hintergrundbild ohne Trickereien verpassen */
#leftBlock { height: expression((document.body.clientHeight-157) + "px");}
  </style>
<![endif]-->

Soll #leftBlock ebenfalls mit height: expression angesteuert werden, ist dieser Block mit position:absolute zu behandeln.

selbstzentrierende Seite 980px breit, 100% hoch

/* 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;
    }
 
#container { position: absolute;
       background: #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: #ffff99;
  top: 117px;
  bottom: 30px;
  right: 0;
  padding: 5px 15px 5px 5px;
  margin-left: 220px;
  overflow: auto; }
 
#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: url(/picture/Fuss.jpg) repeat-x;
  }
#footerBlock a{ color:#f2f2f2;}

Vorlage

FIXME

deutsch/templates/2-spalten-feste-breite-variable-hoehe.1245755204.txt.gz · Last modified: 2018/06/03 18:07 (external edit)

Show pagesource Old revisions