【问题讨论】：
警告：这个答案并没有解决原来的问题，我误解了他的问题。作者想要实现的目标可能仅使用 CSS 是不可能的，因为我们结合了粘性页脚、始终可见的页脚头（如任务栏）以及主要内容和页脚的动态高度。
我将 sn-p 留给任何可能寻找粘性页脚的人。
小提琴： 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 概念，您可以在此基础上进行更多研究。你有你的主要内容，你有你的页脚，我们使用 push 容器 的一个小技巧来真正地推动页脚，这样它就不会与你的任何内容重叠。
额外的CSS只是为了演示，希望你能把它清理干净，按照你需要的方式实现它。
【讨论】：
这不是准确您所要求的，但您可以废弃底部的 div，并将大背景图像添加到 body。应用background-position: center bottom; 使图像紧贴屏幕底部。如果图像具有清晰的背景，这将特别有效。
body {
background: url('largeImage.png') no-repeat center bottom;
}
【讨论】：
嗯，只是将 div 的高度设置为'lower'？如果您希望内容灵活，甚至可以使用最小高度。
【讨论】：
div一个特定的高度，我认为这个问题不会在这里。
您可以使用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)
);
}
【讨论】：