Html 使用CSS填充页面多余部分

我正在尝试创建一个div，如果页面底部有任何空白，它将填充该页面底部的任何空白，如果页面内容延伸到/超过底部，它将消失。我知道这可以用java来实现，但我希望尽可能少地使用包装器来坚持使用CSS

我尝试过几种不同的方法，但到目前为止还没有任何效果，我遇到的大部分是粘性页脚、表格和填充特定div元素的多余部分（这不是因为我希望它在body/html级别上对整个页面起作用）

我得到的最远的结果（仍然不起作用）是尝试使用交替的顶部和底部值进行绝对定位，但是设置

top:inherit

，然后设置

bottom:0px

，效果并不好。。。例如：

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

任何帮助都将不胜感激

---

---

更新：到目前为止，每个人似乎都认为这是Javascript的工作，所以我提出了这个快速的jQuery解决方案：请随意在代码上给我一个新的，因为我一直很感激这个学习机会：）

如果你想在这里做背景，我会使用一个div，它可以延伸到整个可见区域（如果可见区域与内容一样大，则仅隐藏在内容后面）

那么这里应该是这样的：

以下是我使用的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;
}

这里有更多的信息：

---

我可以想象，我有时不得不使用

min height

而不是

height

来表示正文或html…但我记不起什么时候或者为什么…

你期望什么？？@初学者只有在“填充”的情况下区域调整到页面高度，并从上一个div的底部运行到页面的底部，而不扩展页面，但如果页面内容足以填满窗口，则会消失…因此，是的，我期待“填充”区域要比我原来的JSFIDLE占用更多的空间，但您发布的简单示例并不是我想要的最终结果。@Koopa那么预期的结果是什么？@adityaponkhe“fill”div应该从上一个div的末尾扩展到页面的底部，但根本不扩展页面，如果上一个内容足以填满窗口，div就会完全消失。在本例中，“fill”div应该扩展到红色。在初学者给出的示例中，“fill”区域扩展页面以实现覆盖范围，并且不会随窗口大小或内容大小的变化而变化。问题在哪里？？？？？谢谢，但这根本不是我想要做的。最小高度正好在那里，这样div就不会消失。我正在尝试制作一个从上一个div底部向下延伸的div如果页面上以前的内容足以将其扩展到窗口大小之外，它将消失。这里有一个更新：Koopa，我认为这只是表格…或JavaScript的可能。顺便说一句：我真的很想在其他一些设备上尝试这个应用程序准备好后…在我的mobi上f.e.上le phone…同意。你不能只使用HTML和CSS来填充一个没有内容的div页面，你只能按照@SimonSimCity的建议来伪装它。使用表的问题是，如果内容比窗口大。我可以将整个内容放在一个表包装器中，但这对我来说真的太草率了……在java中，我可以直接使用计算内容高度并从窗口高度中减去它，但我也试图将我的java降到最低（因为我上一次的设计遇到了很多问题）所以我想在我回来之前，我会看看是否有人有一些干净的CSS方面的东西…库帕，我只是想说：你在这里不是真的使用Java，是吗？你是说JavaScript，对吗？

Java对JavaScript就像火腿对仓鼠一样。