css - 将 div 放在视口(viewport)底部而不覆盖以前的内容

Question

我有一个外部 div，称为#wrap，还有两个内部 div:#container 和#footer。内容在#container 中，并且是动态的。可能有一点，可能有很多。

当内容很少时，页脚 div 可能会出现在页面的中间位置。但是，这会根据显示器/分辨率而变化。在大型显示器上距底部 50% 的部分在小/杂乱的视口(viewport)上可能仅距底部 10%。

如果我使用这个 css 方法:

body,html { height: 100%; }
#wrap     { position:relative; min-height:100%; }
#container{ margin:0px 0px 50px 0px; }
#footer   { position:absolute; bottom:0px; }

然后页面将始终扩展以使用 100% 的视口(viewport)，并且页脚将位于视口(viewport)的底部 - 完全符合要求。

但是，如果内容增加(或者如果视口(viewport)变小)，页脚可能会覆盖任何延伸到其 130 像素高度的内容——页脚不会向下倾斜。

有办法解决这个问题吗？

注意:我不希望使用百分比作为页脚高度，因为它固定为 130 像素并且无法压缩。

Here is a fiddle I've been using to experiment

Answer 1

这是我见过的最好的粘性页脚示例:http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

更新(2017 年 4 月): 由于上述链接已无法操作(自原始帖子发布以来已经过去了很长时间)，我想针对此问题提供以下解决方案:

永久固定:

#container {
    padding-bottom: 130px; // ...or more
}

#footer {
    bottom: 0;
    height: 130px;
    position: fixed;
    width: 100%;
}

对于动态固定的元素，查看这个 jQuery 插件:https://libraries.io/bower/jquery-sticky-header-footer