确定最大可能的DIV高度

Question

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

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

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

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

一些示例（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位系统中是否会得到不同的结果？

--编辑：更新了fiddle以在Opera中停止于10,000,000,000（并更快地到达那里）。这是很多像素。

- Hamish

---

我必须点赞这个问题，仅仅因为它太晦涩难懂了。 - Mike Christensen

我知道，但这是在一个现实世界的情境中提出来的（对于非常大的表格，使用“虚拟”滚动条）。 - Hamish

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

感谢Opera没有最大限制。1千万微软？当人们在Facebook上抱怨字体变化时，这很容易被超过。/ 喷子 - Martin Hansen

最近，Chrome浏览器（版本21）似乎只支持最大35791389像素，仅为先前最大值的1/3。 - Ashwin Prabhu

Answer 1

这是您的代码，经过修改后使用二分查找（因此速度更快）。

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

它从1像素开始，每次加倍其大小，直到达到最大值（我使用2⁵³，这是JavaScript中可以在不丢失精度的情况下存储的最大整数，否则二分查找会出现错误），或者div坍塌到零像素。

假设我们将div设置为大小h并使其消失，则最大大小必须在h/ 2和h之间。 我们从那里开始进行二分查找，寻找一个高度h，使得当将其设置为高度h时，div不会消失，但设置为h+1时会消失。

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

- Thai

---

这个js fiddle非常有帮助，但我发现一个有趣的事情是，在某一点之后，浏览器似乎有一些最大高度，他们会将div设置为该高度，并将任何更大的内容裁剪到该高度 - 在稍后的时候，我们会看到0高度的div。但正是这种裁剪给我带来了问题。这是一个略微调整过的fiddle版本：http://jsfiddle.net/zkuGv/16/我已经在Chrome和IE 11上进行了测试，并得出了以下数字：

• Chrome在25,165,824px之前都可以正常工作
• IE 11在1,533,917px处出现问题

我真的怀疑Opera的数字会达到数十亿。 - David Goldstein

根据我对react-virtualized的测试，我认为Chrome现在已经达到了大约3350万。至少这就是scrollTop停止的位置。您可以使用top将项目进一步向下定位（至少有一点），但无法滚动到它们。 - bvaughn

Answer 2

需要注意的是，虽然您可以让元素非常高，但在一定高度后，根据您的实际需求，它们将无法使用。

修改泰国 jsfiddle 以使文本位于底部：

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

http://jsfiddle.net/8kjstu4x/

现在:

• 将高度设为30000000（三千万），向下滚动，文字仍然存在。
• 将高度设为40000000（四千万），向下滚动，文字消失了。

我还注意到，在高约1600万像素的地方，事情开始出现问题。边框丢失、对齐问题等。

- Craigo

---

这是对这个（旧）问题的一个非常有趣的补充。所以在2021年仍然存在未定义的浏览器特定行为！ - Hamish

@Hamish 当然是的。不过需要注意的是，一旦你达到了这样的高度，用户使用滚动条的体验可能就不太好了。所以，也许是时候重新设计了。 :-) - Craigo

Answer 3

试一下这个：http://jsfiddle.net/serkanyersen/yNfuX/

它会遵循父元素的填充和边距属性。当你点击MAX按钮时，DIV会扩展到最大可用空间。我相信您可以根据自己的需要进行转换。

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

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

- Serkan Yersen

---

“保持可见”这部分很令人困惑。显然这不是你要找的答案。 - Serkan Yersen