css - 身体高度将页脚向下推得太远

Question

我的身体将页脚伸展得太远时遇到了麻烦。

我的 CSS：

body{
    background-color:#EDEDED !important;
    background-image:url('http://static.lukepolo.com/public/assets/img/broken_noise.png') !important;
}

body > .container{
    min-height:100%;
}

html, body {
    height: 100%;
 }

footer{
    padding:10px;
    background-image:url('http://static.lukepolo.com/public/assets/img/broken_noise.png') !important;
    color:white;
}
footer p{
    display:inline-block;
}

我的 HTML：

<div class="container">

</div>
<footer>
        <?php echo $footer;?>
</footer>

这是我的链接： http: //lukepolo.com/blog

Answer 1

这是一个相当常见的 css 问题，因此有一个典型的解决方案。

您需要通过向其添加负数来向上拉页脚margin-top，这等于它的高度。然后为了确保它不与 .container 中的任何内容重叠，这次添加到 .container，padding-bottom它也等于页脚的高度（等于或更高）。

Answer 2

好吧，出现滚动条是因为您向页脚添加了填充。

我您正在尝试实现粘性页脚，那么这可能会对您有所帮助：http ://www.cssstickyfooter.com/

Answer 3

您可以删除：

body > .container{
    min-height:100%;
}

因为这就是导致页脚离开屏幕的原因。