schneida: Header und darunter scrollende 100% divs

SELF-Forum

Header und darunter scrollende 100% divs

schneida
– Informationen zu den Bewertungsregeln

Hallo!

Ich weiß, es gibt Milliarden von Anleitungen die 100% Layouts und fixierte Header erklären und trotzdem schaffe ich es nicht. Vielleicht könntet ihr mir weiterhelfen:

Was ich machen möchte:
Ich bastle an einer Seite, die einen Header (Höhe: 60px) und darunter 4 Spalten haben soll. Diese 4 Spalten sollten immer 100% Hoch sein (also Seitenhöhe - 60px des Headers), mit Prozentangaben immer width 100% erreichen sowie, wenn sie länger werden als die Höhe der Seite den restlichen Inhalt nur mit einem Slider preisgeben.

Hier ein Bild, damit das ganze leichter verständlicher ist: ![](http://img801.imageshack.us/img801/9846/layoutbw.th.png]
Link: [link:http://img801.imageshack.us/img801/9846/layoutbw.png@title=Bild)

Wichtig ist, dass die Seite selbst (also der Body) nie einen Schieberegler bekommen sondern nur die einzelnen Spalten verschoben werden können. Der Text der verschoben wird sollte anschließend unter dem Header bleiben, dieser sollte also immer sichtbar sein.

Das Problem ist, dass die Seite nicht nur auf einem Desktop funktionieren sollte, sondern auch auf einem iPad. Dort werden die Schieberegler allerdings mittels iScroll emuliert. Das iPad versteht allerdings kein position: fixed...

Ich sitzt jetzt schon ein paar Tage dabei und bekomm das einfach nicht wirklich hin. Eventuell hat ja jemand einen Tipp für mich. Vorerst sieht das ganze so aus:

  
<body>  
  <div id="header">Bla</div>  
  <div id="container">  
        <div id="wrapperItems">  
            <div id="itemsContainer" class="column">  
                <ul id="items"></ul>  
            </div>  
        </div>  
        <div id="wrapperWordGroups">  
            <div id="wordGroupsContainer" class="column">  
                <ul id="wordGroups"></ul>  
            </div>  
        </div>  
        <div id="wrapperWords">  
            <div id="wordsContainer" class="column">  
                <div id="words"></div>  
            </div>  
        </div>  
        <div id="wrapperText">  
            <div id="textContainer" class="column">  
                <div id="text"></div>  
            </div>  
        </div>  
    </div>

In die innersten divs (id="text", id="words",...) werden per ajax Einträge geladen. Der Wrapper wird von iScroll gebraucht um die Höhe der divs bestimmen zu können.

  
html  
{  
    height: 100%;  
    max-height: 100%;  
    width: 100%;  
  
    padding: 0;  
    margin: 0;  
    border: 0;  
  
}  
  
body  
{  
    height: 100%;  
    max-height: 100%;  
  
    margin: 0;  
    padding: 0;  
    border: 0;  
    overflow: hidden;  
  
}  
  
#container  
{  
    height: 100%;  
    width: 100%;  
}  
  
  
#container > div  
{  
	height:100%;  
	overflow: auto;  
}  
  
  
#wrapperItems  
{  
    float:left;  
	width:20%;  
}  
  
#wrapperWordGroups  
{  
    float:right;  
	width:20%;  
}  
  
#wrapperText  
{  
    float:left;  
	width:30%;  
}  
  
#wrapperWords  
{  
    float:right;  
	width:30%;  
}  
  
div.column  
{  
    height: 100%;  
    border-right: 1px solid black;  
    position: relative;  
    z-index: 200;  
}  
  
#header  
{  
    height: 60px;  
	width: 100%;  
}

Mit dem aktuellen Setup schaut das ganze schon wirklich gut aus. Einziger Hacken an der Sache: die divs scrollen auf dem Desktop (Chrome, Safari,...) nicht weit genug, es fehlen genau die 60px vom Header... Scheinbar ist es aber nicht möglich height:100%-60px zu machen (obwohl ich gedacht habe sowas sollte es einmal geben!?).

Vielen Dank für alle Helfer.

schneida

Beitrag melden
–
Informationen zu den Bewertungsregeln