css - 页脚位置太靠前

Question

当页脚上方有足够的内容将其“推”到页面底部时，我的页脚位于我想要的位置(http://v3.edharrisondesign.com/)，但如果没有内容，它就位于太上方(http://v3.edharrisondesign.com/about/)。

有什么想法吗？

Answer 1

如果您在 google 上搜索粘性页脚，您会发现这是一个常见问题，但有一些解决方案。不管怎样，我查看了您的网站，这是您需要做的:

1) 到 html 的 规则集，添加:

height: 100%; 

2) body 的规则集:

-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
min-height: 100%;
padding-bottom: 80px; /* same as footer's height */

3) 页脚:

position: absolute;
bottom: 0; /* you already have this */

此解决方案利用了 box-sizing 属性。如果支持旧版浏览器是必需的，它就不会工作 - 你需要在 html 中为此添加一个额外的元素(如果这是你想要的，请告诉我)。

漂亮的网站，顺便说一下!