html - 页脚总是在底部；内容和页脚的背景图片

Question

我的 html 页面顶部有一个标题和一个菜单，菜单下面是内容部分，底部是页脚。页脚必须始终位于窗口底部，无论内容大小如何(除非内容高于窗口，在这种情况下页脚必须位于内容下方)。我有实现此功能的标记和 CSS 规则(如下)。

但我还需要在内容和页脚上显示背景图像。也就是说，图像必须覆盖整个屏幕但标题/菜单区域。我不知道如何做到这一点。在我下面的代码中(以及在 http://jsfiddle.net/EGj54/ 的 jsfiddle 上)我已经将背景附加到整个页面，但我希望它只显示内容和页脚。

有人可以帮我吗？

<div id="main">
    <div id="navbar">
        <div id="caption"><span>Test</span></div>
        <ul id="sections">
            <li><span>current</span></li>
            <li><a href="">next</a></li>
        </ul>
    </div>
    <div id="content">content</div>
    <div class="push"></div>
</div>
<div id="footer">footer</div>

* {
    margin: 0;
}
html, body {
    height: 100%;
}
ul {
    list-style-type: none;
}
ul li {
    display: inline;
}
#caption {
    font-weight: bold;
}
#footer, .push {
    color: white;
    height: 25px;
}
#sections {
    background-color: #aaaaaa;
}
#main {
    height: auto !important;
    margin: 0 auto -25px; /* bottom margin is negative value of #footer height */
    min-height: 100%;
}
#main {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
    background-size: cover;
}

Answer 1

你的页脚将停留在底部，因为你最后将它与你的 div 一起放置，只要你不使用 float 或绝对定位就没有问题。将后台样式移动到 body 以解决您的问题:

body {
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Clouds_over_the_Atlantic_Ocean.jpg/800px-Clouds_over_the_Atlantic_Ocean.jpg');
    background-size: cover;
}