Question

我正试图让页脚冲到页面底部，但不一定是粘性的 - 只是在用户向下滚动的情况下位于底部。

这“有效”但是在页脚出现后底部似乎有一点白色空间看起来有点尴尬。有没有人知道用CSS将页脚冲到底部并将其保持在最底部而不使其粘稠的最佳方法？

如果您希望我发布我的html / css，请告诉我。

Answer 1

网上有很多很好的例子。

这是一个据称更新的版本：http://mystrd.at/modern-clean-css-sticky-footer/;我没有这方面的经验。

这是经典版本已经存在了很长时间并且被许多人广泛使用：

http://www.cssstickyfooter.com/html-code.html（waybackmachine已存档）

这是我自己的第二个链接的略微编辑版本，我很幸运。

/* Sticky Footer Stuff
 */
html,body { height: 100%; }
#sticky-wrap { min-height: 100%; }
.footer {
     height: 160px;
     margin-top: -160px;
}
/* end sticky footer stuff
 */


<div class="wrapper" id="sticky-wrap">
     <div class="content-area”>
     </div>
</div>
<footer>
</footer>

Answer 2

我有类似的问题。我一直希望我的页脚位于页面底部，但不会与其他div重叠。

我想出的最佳解决方案是：

CSS

#footer { 
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
@media screen and (max-height: 700px) {
  #footer {
    position: relative;
  }
}

HTML

<div id="footer"></div>

这将使页脚始终位于最小高度701px的底部，而低于它将位于相对于其他div的底部。当然，您可以更改参数并将其设置为您自己的像素测量值。

希望这有帮助。

页脚在底部但不粘

2 个答案: