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 nebeneinander stehen in einem Container.
Der Scrollbalken soll dynamisch im Main erzeugt werden, falls notwendig.
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:

header/ Vorlage

/* diesen Codeschnipsel in den Header der Vorlage einstellen: */
<!--[if lt IE 7]>
  <style type="text/css">
#mainBlock { height: expression((document.body.clientHeight-157) + "px");}

/* Vorteil: Man kann dem leftBloch einen eigenen Hintergrund ohne Trickereien verpassen */

#leftBlock { height: expression((document.body.clientHeight-157) + “px”);}

</style>

<![endif]–>

selbstzentrierende Seite 980px breit, 100% hoch

/* selbstzentrierende Seite 984px 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 {
  left: 25px;
  width: 200px;
  }
 
#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.1245754304.txt.gz · Last modified: 2018/06/03 18:07 (external edit)

Show pagesource Old revisions