This is an old revision of the document!


2 col, fixed width, var. height

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.

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

CSS

Folgende Lösung hat bisher einem Test standgehalten und sich stabil verhalten:

selbstzentrierende Seite 984px 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;
  background: #123456;
  }
 
#container { position: absolute;
       background: #006400;
       margin: 0px 0px 0px -490px;
       left: 50%;
       width: 984px;   /* 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; }
 
/* nur mit diesen Einstellungen bleibt der IE6 stabil */
#mainBlock {
    height: expression((document.body.clientHeight-157) + "px");
    width:  expression((document.body.clientWidth-525) + "px");
                 }
 
#leftBlock {
  left: 25px;
  width: 200px;
  }
 
#footerBlock {
  position: absolute;
  bottom: 2px;
  text-align: left;
  color: #ffffff;
  width: 984px;
  height: 30px;
  margin: 0;
  padding: 0;
  background: url(/picture/Fuss.jpg) repeat-x;
  }
#footerBlock a{ color:#f2f2f2;}

2spalten_feste-breite_var-hoehe_01.jpg

Vorlage

FIXME

english/templates/2-col-fix-width-var-height.1240639530.txt.gz · Last modified: 2018/06/03 18:07 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0