Set large value to div's height

问题:

I have a problem with height limitation of <div></div> in some web browsers, like Firefox. I have javascript code like this:

$('#MyDiv').css("height","20000000px"); // 20,000,000 pixel height

But I see height: 2e+7px; rule in the firebug. This problem exist in IE too, But in google chrome everything is ok and I see height: 20000000px;. How can I set very large value to div's height in a way that works for most browsers?

EDIT: firefox has no scrollbar in this div, but google chrome has scrollbar.

回答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>

回答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.

回答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⁷.

回答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