确定最大可能的 DIV 高度

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.

Answer 2

It should be noted, while you can make elements very tall, they won't be usable after a certain height, depending on what you're doing.

Modifying Thai jsfiddle to have text at the bottom:

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

http://jsfiddle.net/8kjstu4x/

Now:

• Make the height 30000000 (30 million), scroll down, text is still there.
• Make the height 40000000 (40 million), scroll down, text is gone.

I've also noticed, that after a height of around 16 million pixels, things start going wrong. Missing borders, alignment issues, etc.

Answer 3

Here try this: http://jsfiddle.net/serkanyersen/yNfuX/

It will respect the parent's padding and margin properties. When you click MAX button, DIV will expand to most available space. I'm sure you can convert this according to your needs.

It actually needs to be recursive, starting from itself to the very top, but I didn't have time to implement that.

NOTE: Try resizing the page, and uncomment the parent DIV to see it fully work.