在较低的 div 中带有 bg 图像的 HTML CSS 布局

Question

我怎样才能让 div 'lower' 用它的背景图像填充屏幕的下部？

Div 'upper' 根据内容增长。

红线标记视口(viewport)。

这里我有一个例子，我是如何用一个表来做的:Splendid

但我想要它无表!!

Answer 1

警告:这个回答并没有解决原来的问题，我误解了他的问题。作者想要实现的目标可能仅使用 CSS 是不可能的，因为我们结合了粘性页脚、始终可见的页脚标题(如任务栏)以及主要内容和页脚的动态高度。

我将此代码段留给可能需要粘性页脚的任何人。

fiddle : Dynamic Content with Sticky Footer

我用一个计时器来说明不断地用内容填充“上层”容器。

基本上您有以下 HTML:

<div class="wrapper">
    <div class="upper">
        <span></span>
    <div class="push">
    </div>        
    </div>

    <div class="lower">
        Footer content goes there.
    </div>
</div>​

当然还有 CSS:

.upper{
    min-height: 100%;
    height: auto !important;
    width: 100%;
    height: 100px;
    background: blue;
    margin: 0 auto -100px; /* The negative value of the footer height. */
    color: white;
}
.lower, .push {
    height: 100px; /* Footer and Push need to have equal height */
    background: red;
    color: white;
}​

代码解释:

这基本上就是所谓的 Sticky Footer 概念，您可以对其进行更多研究。您有您的主要内容，您有您的页脚，我们使用推送容器的小技巧来实际推送页脚，这样它就不会与您的任何内容重叠。

额外的CSS只是为了演示，我希望你能清理它并按照你需要的方式实现它。