底部固定高度div，頂部可變高度

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