CSS：告诉块元素填充高度答案

【问题标题】：CSS: Tell block element to fill in heightCSS：告诉块元素填充高度
【发布时间】：2011-05-04 19:18:29
【问题描述】：

这似乎应该是世界上最简单的事情，但我遇到了困难。我开始认为我对 CSS 的了解并没有我想象的那么多，或者 CSS 的设计比我想象的要糟糕。

我有一个页面。在顶部，有任意数量的标记。然后是块元素。我要做的就是让这个块元素的高度延伸到窗口的底部。

见http://jsfiddle.net/vHVeC/4/。它很接近，但最后一个块元素超出了浏览器的可见区域，创建了滚动条。任何内容都不应超出视口的尺寸（即不应有滚动条）。

在不得不使用 JavaScript 的情况下如何做到这一点？

【问题讨论】：

Help with CSS - getting an element to fill 100% of the remaining vertical space的可能重复
这不一样。虽然标题相似，但当您阅读问题时，情况并非如此，并且接受的答案不能回答我的问题。 :)
@Snickers 所以，你根本不想滚动。或者，您是否希望块元素具有最小宽度？
@Šime：红色框应该填充到底部而不创建滚动条。窗口不应滚动。
@Snickers 你知道上面内容的高度吗？是固定高度吗？

标签： html css

【解决方案1】：

显然，CSS has massive troubles finding heights。宽度，不用担心。

使用 Javascript，你会去：

//Grab div element
var obj = document.getElementById('theDiv');

//Enable sizing
obj.style.position = 'relative';

//Force to window
obj.style.height = document.documentElement.clientHeight+'px';

顺便说一句，在您的 Fiddle 中，div 上方的纯文本节点正在抵消下方的 div。它找到了 100% 的身体高度，但随后被撞倒，导致滚动条。在 CSS 中解决此问题的方法是 position:absolute;left:0;top:0 将其锁定到位。

另请注意，在上述任何一种情况下，如果您最终滚动（例如滚动到 150%），您会看到 div 的底部边缘以 100% 向下滚动。

【讨论】：

【解决方案2】：

这是使用表格的方法（纯 CSS）：

http://vidasp.net/tinydemos/table-layout.html

【讨论】：

链接失效但副本在archive.org web.archive.org/web/20110810063955/http://vidasp.net/tinydemos/…

【解决方案3】：

您已点击css box model problem。一个快速而肮脏的解决方案是设置overflow: hidden 属性以防止滚动条，但您应该非常小心地这样做。您需要确保您的内容适合屏幕，因为超出块元素的任何内容都将无法被用户访问。

【讨论】：