网页：具有可变高度的多个滚动区域 [英] Webpage: Multiple scroll areas with variable height

问题描述

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

I want to create a html page with a header of fixed height, a middle part with variable height and a footer with fixed height. The footer and the header shall not move when scrolling.

到目前为止没有问题。

midlle部分进行分割，使得右列和左列分别具有单独的滚动条和滚动。这是可能的溢出：滚动，只要部件有固定的高度。但我希望他们与窗口增长和收缩。

But i want the midlle part to be divided, so that the right column and the left column have seperate scrollbars and scroll independently. This is possible with overflow:scroll as long as the parts have fixed heights. But i want them zu grow and shrink with the window.

我不链接框架，我想使用javascript（ajax）频繁地改变2列的内容。

I do not linke frames and i want to alter the contents of the 2 columns frequently using javascript (ajax).

创建此类网页的最佳方法是什么？

What is the best way to create such a page?

推荐答案

我已经在IE7 / 8（不是6！）和最新版本的Firefox，Chrome，Opera测试过这个。

I've tested this in IE7/8 (not 6!) and recent versions of: Firefox, Chrome, Opera.

活动演示 （完整无聊的颜色）

Live Demo (complete with boring colours)

strong> HTML 很简单：

The HTML is very simple:

<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 有点复杂： / p>

On the other hand, the CSS is a bit more complicated:

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

你问我。

这篇关于网页：具有可变高度的多个滚动区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！