javascript - 将较大的值设置为 div 的高度

Question

我对 <div></div> 的高度限制有疑问在某些 Web 浏览器中，例如 Firefox。我有这样的 JavaScript 代码:

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

但我看到height: 2e+7px;在 Firebug 中统治。这个问题也存在于 IE 中，但在谷歌浏览器中一切正常，我看到了 height: 20000000px; .如何以适用于大多数浏览器的方式为 div 的高度设置非常大的值？

编辑:firefox 在这个 div 中没有滚动条，但 google chrome 有滚动条。

Answer 1

我只想确认描述hamed 的问题。可以尝试演示 http://jsfiddle.net/OlegKi/y4tLxx53/4/其中包含在测试 div 上使用 jQuery.css 设置 height 属性:

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/>");
}

使用非常简单的 HTML 标记

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

可以在 Google Chrome 中看到预期的结果

但 Firefox 显示

以及 IE10 和 IE11 显示

相反。

顺便说一句，div 上大的 height 设置将用于实现“虚拟滚动”(例如 jqGrid )。这样用户就可以看到带有大滚动条和内部表格的 div。如果用户使用滚动条，则页面数据将通过 Ajax 从服务器下载。在这种情况下，div 的高度 应该对应于服务器上数据的大小。如果一行表格数据的高度为23px，那么IE10/IE11可以简单模拟出IE中只有66692行虚拟数据(1533916/23=66692)和Firefox中有778073行(不到一百万行)。演示表明，需要使用更复杂的“虚拟滚动”实现才能避免上述设置 div 的 height 的问题。

可以交替使用相同的内联演示:

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>