Do the browsers have a maximum height for the body/document? [closed]

Question

Is there a limitation regarding the height in pixels of an html page?

If so, what are the factors affecting the maximum? Is browser-specific (especially IE7), or maybe client-specific (memory etc.) or anything else.

Answer 1

Yes, there is a technical limit to the height of a page. (There's also a practical limit – no one can actually use a page that's billions of pixels high, and if your page is that high, you're almost certainly doing something wrong.)

That said, there are actually two different limits to consider: the maximum height of an element that you can specify in CSS, and maximum total height.

Both vary from browser to browser.

SlickGrid deals with virtual scrolling, so it has to know the maximum height of an element; the code it uses to detect this is here. I put it in a Fiddle: (these are approximate)

• Chrome: 512,000,000
• Firefox: 6,000,000
• IE8-9: 1,000,000
• IE6-7: 128,000,000 (yes, more than newer IEs)

To test maximum total height, I put together this test, which fills the page with 11,000 <div>s 99,999px in height, for a total of ~1.1 billion pixels of height.

• Chrome seems to lose its marbles around 1.08bn px, and somewhere north of 5bn px, the scrollbar disappears entirely.
• Firefox's scrollbar disappears around 107,398,926 px
• IE is all over the place, with <div>s getting misplaced and sized incorrectly.

Answer 2

IE's proprietary CSS filter: in IE7 is limited to 4096 pixels. So if you have a large page with an translucent overlay (or any other element using filter:), that overlay will only stretch to a maximum of 4096 pixels.