网页:多个可变高度的滚动区域

Question

我想创建一个带有固定高度标题的html页面,一个高度可变的中间部分和一个固定高度的页脚.滚动时页脚和页眉不应移动.

到目前为止没问题.

但我希望midlle部分被分割,以便右列和左列具有单独的滚动条并独立滚动.这可以通过溢出:只要零件具有固定高度就滚动.但我希望他们zu与窗口一起成长和收缩.

我没有链接帧,我想使用javascript(ajax)频繁更改2列的内容.

创建这样一个页面的最佳方法是什么？

Answer 1

我已经在IE7/8(不是6!)和最新版本的Firefox,Chrome,Opera中测试了这个.

现场演示(配有无聊的色彩)

该HTML很简单:

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

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

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

另一方面,CSS有点复杂:

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%
}

如果你问我,我会解释CSS是如何工作的.