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

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

我快到了。我可以通过position:absolute和bottom:0使底部div始终可见。但是我无法得到我在寻找top div时所需要的行为，即扩展以填充固定底部上方的剩余空间，但如果画布很大，则不能超出该空间

编辑：以下是代码：

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

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

---

上面的内容看起来不错，但我想从顶部div中删除height:500px，以便将其展开以使用屏幕上所有剩余的可用空间。

据我所知，可能就是您想要的检查：

更新

选中此项：

---

据我所知，您希望页脚始终可见，并且内容可以具有不同的高度。我基本上会做的是

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

---

下面是一个示例：

很接近，但如果顶部div中的渲染画布很大，则不太起作用。它正好在它的div上方和底部运行。检查这个：这很接近，但我不希望滚动条消失在绿色部分后面，我希望它停在上面。我认为高度：100%英寸。顶部是问题所在。非常好。没有想到abs在顶部的定位！我不确定这是否涵盖了整个问题——“我想……让它扩展以使用屏幕上所有剩余的可用空间。”怎么不呢？它可以继续扩展内容，页脚是固定的。不过，它在IE中不起作用，您需要切换div的footer标记。