css - body 高度将页脚压得太低

Question

我的 body 无法将页脚拉伸(stretch)得太远。

我的 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，它也等于页脚的高度(等于或更高)。