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

Question

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

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

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

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

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

#content{
    padding-top : 100px;
}

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

你可以很容易地看到我在这个 Fiddle 中试图做什么, 只需取消注释 JS 即可看到所需的结果。

---

附言:我支持 iE8 及更早版本。

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

Answer 1

由于 #header 和 #footer 是固定位置的，它们被从文档流中取出并且与 #content 不再有关系.

因此你必须选择(恕我直言)。

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

2) 使用 Javascript，因为没有纯 CSS 解决方案(除了 1.point)。