Set Large Value To Div's Height

I have a problem with height limitation of

in some web browsers, like Firefox. I have javascript code like this: $('#MyDiv').css('height','20000000px'); //

Solution 1:

I want just confirm the problem which describes hamed. One can try the demo http://jsfiddle.net/OlegKi/y4tLxx53/4/ which contains setting height property using jQuery.css on the test div:

var testValues = [10000, 1533916, 1533917, 1533918, 10737418, 10737419,
                  17895696, 17895697, 17895698, 20000000], h, i;
for (i = 0; i < testValues.length; i++) {
    h = testValues[i] + "px";
    $("#test").css("height", h);
    $("#log").append("<span>After setting height " +  h +
                     ", one have height: " + $("#test").css("height") +
                     "</span><br/>");
}

with very simple HTML markup

<div id="log"></div>
<div id="test"></div>

One can see in Google Chrome the expected results

but Firefox shows

and IE10 and IE11 displays

instead.

By the way, the setting of large height on divs will be used to implement "virtual scrolling" (for example in jqGrid). So that the user sees div with large scroll and a table inside. If the user uses scroll bar then the page of data will be downloaded from the server via Ajax. In the way the height of the div should corresponds to the size of data on the server. If one row of table data have height 23px, then IE10/IE11 can simulate in the simple way only 66692 rows of virtual data in IE (1533916/23=66692) and 778073 rows (less as a million rows) in Firefox. The demos shows that one need use more sophisticated implementation of "virtual scrolling" to have no, described above, problems with setting of height of div.

One can use the same inline demo alternatively:

var testValues = [10000, 1533916, 1533917, 1533918, 10737418, 10737419,
                  17895696, 17895697, 17895698, 20000000], h, i;
for (i = 0; i < testValues.length; i++) {
    h = testValues[i] + "px";
    $("#test").css("height", h);
    $("#log").append("<span>After setting height " +  h +
                     ", one have height: " + $("#test").css("height") +
                     "</span><br/>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="log"></div>
<div id="test"></div>

Solution 2:

I have run into the same issue implementing virtual scrolling. My solution is to detect numbers that are too large and use a multiplier.

This means that the height of the overflowed content will be realHeight / multiplier. And when I'm trying to figure out what data to show, I just take the scrollTop * multiplier. This works fine to the user because the scrollbar has a minimum height.

This will work if you have control over the effect. I'm not familiar with jqGrid, but the source code may have to be updated.

Solution 3:

That's not a problem. The value 2e+7 is the same as 20000000, it's just a different way of showing the number.

In some tools, large numbers are shown in scientific notation. The number 2e+7 means 2 * 10.

Solution 4:

If your document is size is not fixed, you can use this:

var height = $(document).height();

and set your div container height accordingly

$('#MyDiv').css("height",height);

This should work on all the browsers