Height limitations for browser vertical scroll bar

Question

The maximum limit for height obtained to render browser scroll bar have various values in all browsers. If increasing 1px from the limited height then the browser scroll won't render in the page.

FF: 17895697px

IE: 10737418px

In Chrome there is no problem to render the scroll bar, but it have always 33554400px height in the layout.

There is a reference for maximum pixel height to an element based on the browser, but there is no reference for browser scroll bar limitation.

Is there anyway to overcome this height issue? i.e. The scroll bar need to be appear when the limited height exceeded.

Answer 1

Technically this is possible as long as any one element doesn't exceed the max height. But for practical purposes it isn't possible because browser behavior gets weird once the overall body height goes over the limit.

This actually seems to work OK in IE11:

div{
  background: red;
  color: white;
  height: 10737418px;
}

.blue {
  background: blue;
  color: white;
}

<div>
  Test
</div>
<div class="blue">
  Test
</div>
<div>
  Test
</div>
<div class="blue">
  Test
</div>

All four divs show up with the CSS applied. You can search for the word "test" and it will scroll to the word all four times.

In Firefox, the scrollable height will be larger than the max size but it will stop rendering anything below it:

div{
  border: 3px solid purple;
  height: 17895697px;
}

.blue {
  background: blue;
  color: white;
}

.red {
  background: red;
  color: white;
}

<div>
  Test
</div>
<div class="blue">
  Test2
</div>
<div class="red">
  Test3
</div>

The first box has a 3px purple border. Firefox won't even render the bottom border and the other 2 divs aren't visible at all. The browser can tell that the word "test" is in the page 3 times but using 'Find' will not make the page scroll to the other divs. It just sits there.

In Chrome, things just get weird:

div{
  border: 3px solid #000000;
  background: #CCCCCC;
  height: 99999999999999999999999999999999999999px;
}

<div>
  Test
</div>
<div>
  Test2
</div>
<div>
  Test3
</div>

The first div doesn't get a border at all and then for some reason the div border repeats over and over again after the first div even though there are only two other divs in the page. Chrome's "Find" does recognize that the word 'Test' is only in the page 3 times but it thinks the second two are at the very bottom of the page. The word 'Test' isn't visible the 2nd or 3rd time.

You get other odd behavior if you put elements that tall in a container with a fixed height and overflow set to scroll.

The only way I can see of getting around this is to make sure the page height never exceeds the limit.

If it's static content, just break it up across multiple pages.

If it's dynamic content you could:

• Set an arbitrary limit on how much content is placed on the page before it generates a link to additional pages

• Place a limit on how much content is visible at one time

  • EX: A FAQ page with an accordion layout so you have to click on the question for the answer to appear and only one answer is visible at a time

• Place a limit on how many records/results are returned

• Hide/collapse/remove content the user has scrolled past (I haven't tried this but if you can do it I don't see why it wouldn't work.)