Question

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

到目前为止没问题。

但我希望midlle部分被分割，以便右列和左列具有单独的滚动条并独立滚动。这可以通过溢出：只要零件具有固定高度就滚动。但我希望他们随着窗户的增长而缩小。

我没有链接帧，我想使用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是如何工作的。

Answer 2

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

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

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

2 个答案: