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

Question

首先，我正在寻找纯CSS解决方案。我可以用JavaScript轻松地完成它，所以不要费心给我提示如何在JS中做到这一点。

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

我想给静态容器一个填充顶部和底部等于固定容器。

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

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

#content{
    padding-top : 100px;
}

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

你可以很容易地看到我在这个Fiddle中想要做的事情，只是取消注释JS以查看所需的结果。

---

P.S。：我支持iE8及更早版本。

P.P.S。：我完全清楚，JS可能不可能。如果是这样，请在评论中告诉我。

Answer 1

由于#header和#footer处于固定位置，因此它们将从文档流中取出，与#content无关。

因此你必须选择（imho）。

1）给页脚一个固定的高度，这样就可以进行填充技巧，就像你的标题一样。

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