确定最大可能的 DIV 高度

Posted 2023-02-21

【中文标题】确定最大可能的 DIV 高度

【英文标题】：Determine Maximum Possible DIV Height

【发布时间】：2011-12-04 21:05:00

【问题描述】：

是否有推荐的方法来确定 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 位系统中得到不同的结果吗？

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

【问题讨论】：

我不得不赞成这个问题，因为它是多么晦涩。

是的，我知道，它是在现实世界中出现的（对于非常大的表格，数据网格上的“虚拟”滚动条）。

您的演示似乎永远不会在 Opera 中结束。看来clientHeight 从未设置为0。

根据评论更新了它。它在那个尺寸下可见吗？

感谢opera没有最大值。 1000万微软？当人们抱怨 facebook 上的字体更改时，评论线程中很容易超过这一点。 /巨魔

【参考方案1】：

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

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

它从 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>

http://jsfiddle.net/8kjstu4x/

现在：

将高度设为 30000000（3000 万），向下滚动，文本仍然存在。 将高度设为 40000000（4000 万），向下滚动，文本消失。

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

【讨论】：

这是对这个（旧）问题的一个非常有趣的补充。因此，在 2021 年，这里仍然存在未定义的特定于浏览器的行为！

@Hamish 当然是。不过，还应该注意的是，一旦达到如此高的高度，您的用户将无法获得最佳的滚动条体验。所以，可能是重新设计的时候了。 :-)

【参考方案3】：

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

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

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

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

【讨论】：

“保持可见”部分令人困惑。显然这不是您要寻找的答案。