Question

我需要创建一个包含两个div的页面。无论页面大小如何，都有一个固定高度的底部必须始终可见。然后应将其上方的所有空间（如果有的话）分配给包含画布的另一个div。根据数据和其他条件，画布可以具有不同的高度，大小。如果它大于分配的空间，我想要一个滚动条出现

我越来越近了。我可以通过位置始终显示底部div：绝对和底部：0。但我无法得到我正在寻找顶部div的行为，即扩展以填充固定底部上方的其余空间，但如果画布很大则不会超出。

编辑：这是代码：

.top {
  height: 500px;
  overflow-y: auto;
}
.bottom {
  position: absolute;
  bottom: 0;
  height: 20px;
}

稍后有javascript在顶部div中生成画布;基于服务器端代码，它可以是任意高度。

我上面的内容看起来是对的，但是我想删除高度：从顶部div移出500px以使其展开以使用屏幕上剩余的所有可用空间。

Answer 1

根据我的理解，你可能想要检查一下：

http://jsfiddle.net/DwApF/2/

更新了

检查一下：

http://jsfiddle.net/DwApF/14/

Answer 2

根据我的理解，您希望页脚始终可见，内容可能具有不同的高度。我基本上会做的是

// Create a padding to allow all content to be visible
body { padding-bottom: 5em; }

footer
{
    // Move it to the bottom and fix it to the view
    position: fixed; bottom: 0px;
    // Give it its dimensions. Height should be the same or less than the body bottom-padding.
    height: 5em; width: 100%;
}

以下是一个示例：http://tinkerbin.com/gF303DsM

底部固定高度div，顶部可变高度

2 个答案:

http://jsfiddle.net/DwApF/2/

http://jsfiddle.net/DwApF/14/