html - 页脚在底部但不粘

Question

我试图让页脚齐平到页面底部，但不一定是粘性的 - 只要在底部以防用户向下滚动到那里。

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

如果您想让我发布我的 html/css，请告诉我。

Answer 1

网络上有很多很好的例子。

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

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

http://www.cssstickyfooter.com/html-code.html (回程机存档)

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

/* 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>