确定最大可能的DIV高度

Question

是否有推荐的方法来确定DIV可以设置的最大高度并保持每个浏览器可见？这似乎没有在任何地方记录，并且具有高度特定的实现。

例如，请参阅以下测试脚本：

http://jsfiddle.net/NP5Pa/2/

这是一个简单的测试，用于找到在元素的相应clientHeight变为0之前可以设置DIV样式高度属性的最大值。您可以通过单击“查找最大”然后递增找到的高度来确认按1并单击“设置高度”。

一些例子（Win7 / 64）：

Chrome (14.0) :    134,217,726 px
Safari (5.1)  :    134,217,726 px
IE (9.0)      :     10,737,418 px
FF (7.0.1)    :     17,895,697 px

我猜想WebKit会产生相同的结果并不奇怪 - 更令人惊讶的是IE和FF是如此不同。

有更好的方法吗？你在32位系统中获得了不同的结果吗？

- 编辑：更新小提琴以停止10,000,000,000（并更快地到达）Opera。这是很多像素。

Answer 1

这是你的代码，修改为使用二进制搜索（所以它更快）。

http://jsfiddle.net/thai/zkuGv/4/

它从1像素开始，并且它的大小加倍直到它达到最大值（我使用2 ⁵³ ，这是可以存储在JavaScript中的最大整数而不会丢失精度并且会生成二进制搜索错误），或者div折叠为零像素。

假设我们将div设置为 h 并且它消失，那么最大大小必须介于 h / 2和 h 之间。我们从那里二进制搜索高度 h ，当设置为高度 h 时不会使div消失，但当设置为 h 时消失1。

然后我们可以得出Opera的结论：2147483583像素。

Answer 2

应该注意的是，虽然您可以将元素设置得非常高，但在达到一定高度后它们将无法使用，具体取决于您在做什么。

修改 Thai jsfiddle 以在底部显示文本：

<div id="inner" style="position: relative;">
  <div style="position:absolute; bottom:0;">
    === BOTTOM ===
  </div>
</div>

http://jsfiddle.net/8kjstu4x/

现在：

• 将高度设为 30000000（3000 万），向下滚动，文字还在。
• 将高度设为 40000000（4000 万），向下滚动，文字消失了。

我还注意到，在大约 1600 万像素的高度之后，事情开始出错。缺少边框、对齐问题等

Answer 3

在此尝试：http://jsfiddle.net/serkanyersen/yNfuX/

它将尊重父级的填充和边距属性。单击MAX按钮时，DIV将扩展到最大可用空间。我相信你可以根据自己的需要进行转换。

它实际上需要递归，从自身开始到最高层，但我没有时间实现它。

注意：尝试调整页面大小，并取消注释父DIV以使其完全正常工作。