html - 网页 : Multiple scroll areas with variable height

Question

我想创建一个带有固定高度的页眉、可变高度的中间部分和固定高度的页脚的 html 页面。滚动时页脚和页眉不得移动。

目前没问题。

但我希望将中间部分分开，以便右列和左列具有单独的滚动条并独立滚动。这可以通过 overflow:scroll 实现，只要部件具有固定的高度即可。但我希望它们随着窗口变大变小。

我不链接框架，我想经常使用 javascript (ajax) 更改 2 列的内容。

创建此类页面的最佳方式是什么？

Answer 1

我已经在 IE7/8(不是 6!)和最新版本的 Firefox、Chrome、Opera 中对此进行了测试。

Live Demo (用无聊的颜色完成)

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 的工作原理。