页脚在底部但不发粘 [英] Footer on bottom but not sticky

问题描述

我正在尝试使页脚刷新到页面底部，但不一定会发粘-只是在底部，以防用户向下滚动.

I'm trying to get a footer to flush to the bottom of the page, but not necessarily be sticky - just be at the bottom in case the user scrolls down there.

这个有效"，但是在页脚出现之后，底部似乎有一些空白，看起来有些尴尬.有谁知道用CSS将页脚刷新到底部并将其保持在最底部而不会发粘的最佳方法吗?

This "works" but there seems to be a bit of white space at the bottom after the footer appears which looks a little awkward. Does anyone know the best way with CSS to flush a footer to the bottom and keep it at the very bottom without making it sticky?

如果您要我发布html/css，请告诉我.

Let me know if you want me to post my html/css.

推荐答案

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

There are a number of good examples on the web of this.

这是一个可能的更新版本: http://mystrd.at/modern-clean-css-sticky-footer/；我没有这个经验.

Here is a supposedly updated version: http://mystrd.at/modern-clean-css-sticky-footer/ ; I have no experience with this one.

这是已经存在了很长时间的经典版本，并且被许多人很好地使用:

And this is the classic version that has been around for a long time and well used by many:

http://www.cssstickyfooter.com/html-code.html (已将waybackmachine存档)

http://www.cssstickyfooter.com/html-code.html (waybackmachine archived)

这是我很幸运的第二个链接，是我自己稍作编辑的版本.

Here's my own slightly edited version of the second link that I've had good luck with.

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

这篇关于页脚在底部但不发粘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！