Css 固定动态高度元素占用空间的解决方案

首先，我正在寻找一个纯CSS解决方案。我可以用JavaScript很容易地完成这项工作，所以不用麻烦给我提示如何在JS中完成

我有一个带有3个容器的网页。其中两个是固定的，另一个是静态的

我想给静态容器一个与固定容器相同的顶部和底部填充

第一个固定元素有一个固定的高度，所以这不是问题，我给出了一个等于高度的填充：

#header{
    height : 100px;
    position : fixed;
}

#content{
    padding-top : 100px;
}

但是第二个固定元素是动态的，因为我们使用的是CMS。客户端可以添加一些元素，我们希望布局能够自动调整

您可以很容易地看到我在这里尝试做什么，只需取消对JS的注释即可看到所需的结果

---

附言：我支持iE8及以上版本

p.p.S.：我完全知道没有JS是不可能的。如果是这样，请在评论中告诉我。

由于

#页眉

和

#页脚

是固定位置的，它们将从文档流中删除，与

#内容

不再有任何关系

因此，您必须选择（imho）

1） 给页脚一个固定的高度，这样你可以做填充技巧，就像你的页眉一样

---

2） 使用Javascript，因为没有纯CSS解决方案（1.point除外）。

谢谢你的回答，我担心会是这样。我想我会接受你的回答，即使我说“我完全知道没有JS是不可能的。如果是这样，请在评论中告诉我。”；）因此，我给出了两个“解决方案”：