CSS溢出佈局

Question

我想爲我的需要做一個像本機桌面應用程序一樣的佈局，但我對css不是很熟悉。

這裏佈局的一個例子，我需要：JSFiddle 我試圖使用溢出這樣的，但不能工作：

.scrollable-container { 
    border: 1px solid #00f; 
    height: auto; 
    overflow: scroll; 
} 

我想要做的事： - 讓。內容 DIV .footer（黃色）DIV即使調整窗口的大小 的.navigation（綠色）和之間入空間 - 讓.scrollable容器如果滾動內容尺寸較大 - 使滾動時的表頭保持固定

謝謝。

Answer 1

嘗試把最大高度到.scrollable-container類：

.scrollable-container { 
    border: 1px solid #00f; 
    overflow-y: auto; 
    max-height: calc(100vh - 190px); 
} 

190px是頁眉，頁腳，導航和頁面標題的高度的「近似」和。

Here is the updated fiddle