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

Question

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

到目前为止没有问题。

但我希望将中间部分分开，以便右栏和左栏有单独的滚动条并独立滚动。只要零件具有固定的高度，就可以使用溢出：滚动。但我希望它们随着窗户的大小而增长和缩小。

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

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

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

Answer 2

尝试在 div 上使用百分比（并省略表格）。例如，您可以将标题设置为 height: 20%，并将两个中间滚动 div 设置为 height: 70%；宽度：50%；浮动：左；。这会将页脚 div 保留在 height: 10% 处。通过 ajax 更改中间 div 的内容不应改变它们的高度。但当然，这提供了可变的而不是固定的页眉和页脚。

注意：这些数字仅供说明之用。您需要调整它们，包括未考虑的填充/边距。