Webseite: Mehrere Scroll-Bereiche mit variabler Höhe

Question

Ich möchte eine HTML-Seite mit einer Kopfzeile fester Höhe, einem mittleren Teil mit variabler Höhe und einer Fußzeile mit fester Höhe erstellen. Fußzeile und Kopfzeile dürfen sich beim Scrollen nicht bewegen.

Kein Problem so weit.

Aber ich möchte, dass der Midlteil geteilt wird, so dass die rechte Spalte und die linke Spalte getrennte Scrollbalken haben und unabhängig voneinander scrollen. Dies ist mit Überlauf möglich: scrollen solange die Teile feste Höhen haben. Aber ich will, dass sie wachsen und mit dem Fenster schrumpfen.

Ich nicht Frames und ich möchte den Inhalt der beiden Spalten häufig mit Javascript (Ajax) ändern.

Was ist der beste Weg, um eine solche Seite zu erstellen?

Answer 1

Ich habe dies in IE7/8 (nicht 6!) Und aktuellen Versionen von: Firefox, Chrome, Opera getestet.

Live Demo (komplett mit langweiligen Farben)

Die HTML ist sehr einfach:

<div id="header">header</div> 

<div id="middle"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 

<div id="footer">footer</div> 

Auf der anderen Seite, die CSS ist ein bisschen komplizierter:

html, body { 
    margin: 0; padding:0; border: 0; 
    overflow: hidden 
} 
#header, #middle, #footer { 
    position: absolute; 
    width: 100% 
} 
#header { 
    background: #777; 
    height: 150px; 
    top: 0 
} 
#middle { 
    background: #f00; 
    top: 150px; 
    bottom: 150px 
} 
#footer { 
    background: #777; 
    height: 150px; 
    bottom: 0 
} 
#left, #right { 
    overflow-y: scroll 
} 
#left { 
    background: #aaa; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 50%; 
    height: 100% 
} 
#right { 
    background: #999; 
    position: absolute; 
    left: 50%; 
    top: 0; 
    float: right; 
    width: 50%; 
    height: 100% 
} 

Ich werde erklären, wie das CSS funktioniert, wenn Sie mich fragen.

Answer 2

Verwenden Sie Prozentsätze auf Divs (und lassen Sie die Tabelle aus). Sie könnten beispielsweise eine Kopfzeile auf height: 20% und zwei mittlere Scroll-Divs unter height: 70%; width: 50%; float:left; festlegen. Dies lässt die Fußzeile div bei height: 10%. Ändern Sie den Inhalt der mittleren Divs über Ajax sollte nicht ihre Höhe ändern. Aber natürlich bietet dies eine variable, nicht feste Kopf- und Fußzeile.

Hinweis: Diese Zahlen dienen nur der Veranschaulichung. Sie müssen sie anpassen, einschließlich Auffüllen/Ränder, die nicht berücksichtigt werden.