确定最大可能的 DIV 高度答案

【问题标题】：Determine Maximum Possible DIV Height确定最大可能的 DIV 高度
【发布时间】：2011-12-04 21:05:00
【问题描述】：

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

例如，看下面的测试脚本：

这是一个简单的测试，用于在元素的相应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 位系统中得到不同的结果吗？

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

【问题讨论】：

【解决方案1】：

这是您的代码，已修改为使用二进制搜索（因此速度更快）。

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

假设我们将 div 设置为 h 大小并且它消失了，那么最大尺寸必须在 h/2 和 h 之间。我们从那里对高度 h 进行二分搜索，当设置为高度 h 时不会使 div 消失，但设置为 h+ 时会消失1.

那么我们可以得出 Opera 的结论：2147483583 像素。

【讨论】：

这个 js fiddle 非常有帮助，但我发现一个有趣的事情是，在某个点之后，浏览器似乎有一些最大高度，它们会将 div 设置为并将任何大于该高度的东西剪辑 -稍后，我们会看到 0 高度的 div。但正是剪辑给我带来了问题。这是小提琴的稍微调整的版本：jsfiddle.net/zkuGv/16 我已经使用 Chrome 和 IE 11 进行了测试，并得出了以下数字： - Chrome 在 25,165,824px 之前都很好 - IE 11 在 1,533,917px 有问题我真的怀疑这个数字是为 Opera 贡献了数十亿美元。
根据我自己对 react-virtualized 的测试，我认为 Chrome 现在已达到约 3350 万。至少那是scrollTop 停止的地方。您可以使用top 将项目进一步向下（至少一点点）定位，但您将无法滚动到它们。

【解决方案2】：

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

修改Thaijsfiddle 使其底部有文字：

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

现在：

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

【讨论】：

【解决方案3】：

在这里试试这个：http://jsfiddle.net/serkanyersen/yNfuX/

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

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

注意：尝试调整页面大小，并取消注释父 DIV 以查看它是否完全正常工作。

【讨论】：