CSS溢出布局

Question

我正在尝试根据我的需要制作类似原生桌面应用程序的布局，但我对css不是很熟悉。

这是我需要的布局示例：JSFiddle 我试图像这样使用溢出但不起作用：

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

我正在尝试做什么： - 即使窗口调整大小，也要在 .navigation （绿色）和 .footer （黄色）div之间设置 .content div空间 - 如果内容大小较大，则可以滚动 .scrollable-container - 滚动时固定表格标题

谢谢。

Answer 1

尝试将 max-height 添加到.scrollable-container类：

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

190px是＆＃34;近似＆＃34;页眉，页脚，导航和页面标题的高度之和。

Here is the updated fiddle