html - 页脚有问题

Question

我已成功将页脚固定在页面底部，但现在 div 底部下方还剩下几个像素。我想摆脱这个空间。页脚与内容 div 冲突也存在问题。我怎样才能阻止它？

<main id="content">
</main>
<div id="push"></div>
<footer id="footer">
    <p>&copy; FrontYard Fairways 2015. All rights reserved.</p> 
    <p>
       <a href="http://validator.w3.org/check/referer">
           <img src="http://www.netwebdev.net/webclass/images/valid-html5.png" alt="Valid HTML5!" height="15" width="80" />
       </a>
    </p>
</footer>

CSS:

#content
{
    border: 1px solid green;
    position: relative;
    display: block;
    height: 54%;
    width: 100%;
    margin: none;
    padding: none;
}

#footer, #push
{
    clear: both;
}

#footer
{
    border: 1px dotted black;
    position:absolute;
    margin: 0 auto;
    bottom: 0;
    right: 0;
    padding: none;
    width: 100%;
    height: 10%;
}

Answer 1

要移除页脚下方的像素，请将正文的边距设置为 0:

body, html{
width:100%;
height:100%;
margin:0;
}

页脚和主体的问题在于页脚具有绝对定位，将其置于布局之外并位于其他元素之上。您使用它使其停留在页面底部，因此要么删除绝对定位，要么给 #content 一个填充底部，即页脚的高度:

#content{
padding-bottom:100px;
}