javascript - Determine Maximum Possible DIV Height

Question

Is there a recommended way to determine the maximum height that a DIV can be set and remain visible per browser? This doesn't appear to be documented anywhere and is highly implementation specific.

For example, see the following test script:

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

This is a simple test to find the maximum value you can set a DIV style height attribute before the corresponding clientHeight of the element becomes 0. You can confirm this by clicking "Find Max" then incrementing the found height by 1 and clicking "Set Height".

Some examples (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

It's not surprising the WebKit produces the same result, I guess - more surprising that IE and FF are so different.

Is there a better way? And do you get different results in 32bit systems?

--EDIT: Updated the fiddle to stop at 10,000,000,000 (and get there quicker) for Opera. That's a lot of pixels.

Answer 1

This is your code, modified to use binary search (so it's much quicker).

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

It begins at 1 pixel and doubling its size until the it hits the maximum (I use 2⁵³, which is the biggest integer that can be stored in JavaScript without losing precision and would make the binary search buggy), or the div collapses to zero pixel.

Suppose we set the div to size h and it disappears, then the maximum size must be between h/2 and h. We binary search from there for a height h that does not make the div disappear when set to height h, but disappears when set to h+1.

Then we can come to a conclusion for Opera: 2147483583 pixels.