0

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

Div 'upper' 根据内容增长。

红线标记视口。

在这里，我有一个例子，我是如何用一张桌子做的：Splendid

但我想要它没有桌子！！

在此处输入图像描述

4

4 回答 4

1

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

我将把这个片段留给任何可能寻找粘性页脚的人。

小提琴： 带有粘性页脚的动态内容

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

基本上你有以下 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 只是为了演示，我希望你可以清理它并按照你需要的方式实现它。

于 2012-05-09T18:36:10.570 回答
0

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

body {
    background: url('largeImage.png') no-repeat center bottom;
}
于 2012-05-09T18:27:41.313 回答
0

嗯，只是设置了 div 'lower' 的高度？如果您希望它内容灵活，甚至可以使用最小高度。

于 2012-05-09T18:29:27.487 回答
0

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

为了获取窗口大小，我建议使用这个函数。我相信它是跨平台的，虽然我最近没有测试过。

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)
    );
}
于 2012-05-09T18:45:07.960 回答