使用CSS填充页面多余

Question

我正在尝试创建一个div，如果有的话，该div将填充页面底部的任何空白空间，或者如果页面的内容扩展到底部/底部，则会消失。我知道这可以使用Java完成，但是我想尽可能少地坚持使用CSS。

我已经尝试了几种不同的方法，但是到目前为止什么都没有解决，我所遇到的大部分是粘稠的页脚，桌子，并在特定的div元素上填充多余的东西（这不是我想要它在身体/HTML级别上在整个页面上工作）。

我获得的最远的（仍然无效）是尝试使用交替的top＆amp;底部值，但是设置top: inherit，然后bottom: 0px效果不佳...示例：http：//jsfiddle.net/v4rnc/6/

基本问题归结为：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 ...但不记得何时或为什么...