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;
}

Answer 2

删除页脚div上的％高度，从<p>标记中删除图像。将图像设置为display: block。

jsfiddle

＆＃13;

#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%;
}

img {
    display: block;
}

＆＃13;

<main id="content">

        </main>
        <div id="push"></div>
        <footer id="footer">
            <p>&copy; FrontYard Fairways 2015. All rights reserved.</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>
        </footer>

＆＃13;

页脚麻烦

2 个答案: