Javascript 使div只使用CSS填充另一个div留下的页面的所有高度

我试图用普通的div标题和可滚动的div内容来创建页面，所以我的内容填充了标题剩余的所有高度，即使标题改变了自己的高度

我尝试了几个选择，这是我最后一个选择。但这个选项的缺陷是，如果标题的高度发生变化，我需要更改内容的top属性

是否有任何解决方案只使用css来实现我的目标

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    position: relative;
}
#header {
    background-color: tan;
}
#content {
    overflow: auto;
    background-color: teal;
    position: absolute;
    bottom: 0;
    top: 20px;
}

<div id="header">
    Test header
</div>

<div id="content">
    Test content
</div>

---

由于css忽略了绝对/固定对象的尺寸，这些对象就其相邻对象而言是流动的，因此可以使用媒体查询来模拟动态高度行为：

@media only screen and ( max-width: 700px ) {
    #header {
        height: 40px;
    }
    #content {
        padding-top: 40px;
    }
}

调整显示区域的宽度以查看效果

---

如果您使用的是SASS，那么您可以轻松生成此类媒体查询，即使是以10px的增量，如果您希望使用for loop。

如果理解正确，唯一的解决方案是使用table？为什么要将内容定位为绝对？如果只是将它们堆叠起来，其工作原理相同，并允许您更改收割台的高度。我对你想要什么有点困惑。这是因为我需要只滚动内容，而不是整个页面。我的内容块将包含docs.google.com这样的文档，所以在我的情况下，只滚动内容是非常必要的。更新的小提琴只滚动内容：正如我所说，它不会改变拟动力高度的一般概念。是的，谢谢。据我所知，只有CSS而不是直接设置高度是无法实现我的目标的，所以你的解决方案是最好的。