HTML CSS布局与较低div中的bg图像

Question

我怎样才能让div'lower'用bg图像填充屏幕的下半部分？

Div'upper'的增长取决于内容。

红线标记视口。

我在这里有一个例子，我是如何使用表格进行的：Splendid

但我希望它无表情！

Answer 1

警告：这个答案并没有解决原来的问题，我误解了他的问题。作者想要实现的目标可能仅限于CSS，因为我们有粘性页脚，始终可见的页脚（如任务栏）和主要内容和页脚的动态高度的组合。

我正在为可能寻找粘性页脚的人留下片段。

小提琴： 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只是为了演示，我希望你可以清理它并按照你需要的方式实现它。

Answer 2

这不是正好您要求的内容，但您可以废弃底部div，并将大背景图片添加到body。应用background-position: center bottom;使图像拥抱屏幕底部。如果图像背景清晰，这将特别有效。

body {
    background: url('largeImage.png') no-repeat center bottom;
}

Answer 3

嗯，只是设置div'较低'的高度？如果你希望它具有内容灵活性，甚至是最小高度。

Answer 4

您可以使用Javascript从浏览器的窗口高度中减去upper div的高度，如果结果大于0，则将lower div设置为该高度？

为了获得窗口大小，我建议使用此功能。我相信它是跨平台的，尽管我最近没有测试过它。

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}