html - 没有固定高度的标题和内容填充页面的其余部分并自动垂直溢出

Question

我的页面上有一个标题。它的内容可以换行，所以高度不固定。页面的其余部分应由内容容器填充。当容器中的内容太多时，它应该激活垂直滚动。我尝试了很多可能性，但总是陷入死胡同(position:absolute或显示:表格)。现在我回到了起点:(

Here is the starting point我的工作。绿色容器是我的页面。我使用 JqueryUI 使其可调整大小，但我正在寻找非 JS 解决方案。

感谢您抽出宝贵时间，希望能得到您的帮助。

Answer 1

这个有效:

.page {
  background-color: #8f8;
  width: 80%;
  height: auto;
}

.header {
  background-color: #fcc;
}

.content {
  background-color: #ccf; 
  overflow: auto;
  height: inherit;
}