0

我有一个名为#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% 的视口，并且页脚将位于视口的底部 - 完全符合要求。

但是，如果内容增加（或者如果视口很小），页脚可能会覆盖任何延伸到其 130 像素高度的内容——页脚不会向下凹凸。

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

注意：我不希望对页脚高度使用百分比，因为它固定在 130 像素并且不能压扁。

这是我一直用来实验的小提琴

4

1 回答 1

0

这是我见过的粘性页脚的最佳示例：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

于 2012-10-19T21:30:43.933 回答