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{
    margin:0;
}

我建议你加一些css重置代码。统一元素的常见浏览器设置（这也可以防止出现这种情况）。

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

1 个答案: