html - 粘性页脚，页脚和页面底部之间的间隙很小

Question

我正在使用粘性页脚。我注意到在内容没有完全到达底部的页面上，页脚和页面底部之间有一个小间隙。

带有页脚空白的短内容示例:http://karenrubkiewicz.com/martin/published.html没有页脚间隙的长内容示例:http://karenrubkiewicz.com/martin/people.html

下面是我的代码。提前致谢!

HTML

<div class="wrapper">

SITE CONTENT HERE

<div class="push"></div>
</div> <!-- END WRAPPER -->

    <section id="footer">
    <div class="left">
        <li><a href="about.html">[about]</a></li>
        <li><a href="contact.html">[contact]</a></li>
        <li><a href="pdf.html">[pdf]</a></li>
        <li><a href="imprint.html">[Imprint]</a></li>
    </div>

    <div class="right">
        <li><a href="http://www.linkedin.com/home" target="_blank"><div class="linkedin"></div></a></li>
        <li><a href=" http://martinkess.tumblr.com/" target="_blank"><div class="tumblr"></div></a></li>
        <li><a href="https://www.behance.net/martinkess" target="_blank"><div class="behance"></div></a></li>
        <li><a href="https://www.facebook.com/martin.kess.7?fref=browse_search" target="_blank"><div class="facebook"></div></a></li>
    </div>
 </section>

CSS

html, body{
height:100%;
}

body{
overflow-x:hidden;
}

.wrapper {
overflow-x:hidden;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}

#footer .push {
height: 50px; /* .push must be the same height as .footer */
}

#footer{
position: absolute;
height: 50px;
left:0;
width:100%;
min-width:1300px;
background:#000;}

Answer 1

你在 body 上还有余量。你应该添加:

body{
    margin:0;
}

我建议你放一些CSS重置代码。统一元素的通用浏览器设置(这也可以防止这种情况)。