网页：具有可变高度的多个滚动区域答案

【问题标题】：Webpage: Multiple scroll areas with variable height网页：具有可变高度的多个滚动区域
【发布时间】：2011-06-01 04:17:03
【问题描述】：

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

目前没有问题。

但我希望将中间部分分开，以便右列和左列具有单独的滚动条并独立滚动。只要零件具有固定的高度，就可以通过溢出：滚动来实现。但我希望它们随着窗户一起长大和缩小。

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

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

【问题讨论】：

到目前为止，您做了什么，将页眉/页脚部分放置到位？
我使用了一个简单的表格布局，每列一个 div，style="overflow-y:scroll;height:500px;"但这不会在调整窗口大小时改变高度

标签： html css web

【解决方案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 的工作原理。

【讨论】：

+1 @thirty 干得好。我不知道您可以同时设置元素的顶部和底部位置。
注意：您忘了提及您最重要的一行：没有它，IE 将无法正确解释它...
@Floste：正确，尽管添加 doctype 是应该始终完成的事情 - 这是不言而喻的。
现场演示没有反映答案...这是一个 CodePen，它将 codepen.io/james-hudson3010/pen/BajEeBw

【解决方案2】：

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

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

【讨论】：

我不希望页脚或页眉缩放。就在中间！！