Question

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

当内容最小时，页脚div可能会出现在页面的中间位置。但是，这会根据显示器/分辨率而变化。大型显示器底部的50％可能只有10％来自小型/杂乱视口的底部。

如果我使用这个css方法：

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

然后页面将始终扩展为使用100％的视口，页脚将位于视口的底部 - 完全符合要求。

但是，如果内容增加（或者如果是一个小视口），页脚可能会覆盖任何延伸到130px高度的内容 - 页脚不会减少。

有没有办法解决这个问题？

注意：我不希望使用百分比作为页脚高度，因为它固定在130px并且不会挤压。

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

将div放在视口底部而不覆盖以前的内容

1 个答案: