html - CSS:告诉 block 元素填充高度

Question

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

我有一个页面。在顶部，有任意数量的标记。然后是 block 元素。我想要做的就是让这个 block 元素将其高度扩展到窗口底部。

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

我如何在必须使用 JavaScript 的情况下做到这一点？

Answer 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% 的 body 高度，但随后被向下撞，导致滚动条。在 CSS 中解决此问题的方法是 position:absolute;left:0;top:0 将其锁定到位。

另请注意，在任何这些情况下，如果您最终滚动(例如滚动到 150%)，您将看到 div 的底部边缘向下 100%。