使用 CSS 填充页面多余部分

Question

我正在尝试创建一个 div，该 div 将填充页面底部的任何空白空间（如果有），或者如果页面内容延伸到/超过底部则消失。我知道这可以使用 java 来完成，但我想尽可能多地使用 CSS 并使用尽可能少的包装器。

我尝试了几种不同的方法，但到目前为止没有任何效果，而且我遇到的大部分内容是粘性页脚、表格和填充特定 div 元素的多余部分（这不是因为我想要它在 body/html 级别处理整个页面）。

我得到的最远（仍然不起作用）是尝试使用交替的顶部和底部值进行绝对定位，但是设置top: inherit 然后bottom: 0px 效果不佳...示例：@ 987654321@

基本问题归结为： 1. 保持 div 的顶部通常位于前一个 div 之后的位置 2. 将 div 的底部延伸到页面底部 3. 随内容和页面大小而变化变化 4. 如果没有多余的空间就会消失。

任何帮助将不胜感激！

---

更新：到目前为止，似乎每个人都认为这是 Javascript 的工作，所以我想出了这个快速的 jQuery 解决方案：http://jsfiddle.net/V4RnC/7/ 请随意在代码上给我一个新的，因为我总是很感激学习机会 :)

Answer 1

如果你想要一些用于背景的东西，我会使用一个 div，它延伸到整个可见区域（如果可见区域与内容一样大，它只是隐藏在内容后面）。

那么这里会是这样的：http://jsfiddle.net/V4RnC/4/http://jsfiddle.net/V4RnC/5/

这是我使用的 css 代码：

#content {
    background-color: #F00;
    /* The overflow is to keep margins of the first and last element in here. Disable it and you get what I mean ;) */
    overflow: hidden;
}

#fill {
    background-color: #00F;
    height: 100%;
}

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
}

这里有更多信息：http://codecamel.com/fullheight

我可以想象，有时我不得不使用 min-height 而不是 height 作为正文或 html ......但不记得何时或为什么......