首先,我正在寻找一个纯 CSS 解决方案。我可以使用 JavaScript 非常轻松地做到这一点,所以不要费心给我提示如何在 JS 中做到这一点。
我有一个包含 3 个容器的网页。其中 2 个是固定的,另一个是静态的。
我想给静态容器一个与固定容器相等的顶部和底部填充。
第一个固定元素有一个固定的高度,所以这不是问题,我给了一个等于高度的填充:
#header{
height : 100px;
position : fixed;
}
#content{
padding-top : 100px;
}
但是第二个固定元素是动态的,因为我们使用的是 CMS。一些元素可以由客户添加,我们希望布局自动调整。
你可以很容易地看到我在这个 Fiddle 中试图做什么, 只需取消注释 JS 即可看到所需的结果。
附言:我支持 iE8 及更早版本。
P.P.S.:我完全知道没有 JS 可能是不可能的。如果是这样,请在评论中告诉我。
最佳答案
由于 #header
和 #footer
是固定位置的,它们被从文档流中取出并且与 #content
不再有关系.
因此你必须选择(恕我直言)。
1) 给页脚一个固定的高度,这样你就可以使用填充技巧,就像你的页眉一样。
2) 使用 Javascript,因为没有纯 CSS 解决方案(除了 1.point)。
关于css - 固定、动态高度元素占用空间的解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22228504/