Question

我在某些网络浏览器（例如Firefox）中遇到<div></div>的高度限制问题。我有这样的javascript代码：

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

但我在萤火虫中看到height: 2e+7px;规则。这个问题也存在于IE中，但在Google Chrome中一切正常，我看到height: 20000000px;。如何以适合大多数浏览器的方式为div的高度设置非常大的值？

编辑： firefox在此div中没有滚动条，但谷歌浏览器有滚动条。

Answer 1

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

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中看到预期结果

enter image description here

但Firefox显示

enter image description here

和IE10和IE11显示

enter image description here

代替。

顺便说一句，在div上设置大height将用于实现“虚拟滚动”（例如在jqGrid中）。这样用户就可以看到带有大滚动和内部表格的div。如果用户使用滚动条，那么将通过Ajax从服务器下载数据页面。在这种方式中，div的height应该与服务器上的数据大小相对应。如果一行表数据的高度为23px，则IE10 / IE11可以以简单的方式模拟IE中的66692行虚拟数据（1533916/23 = 66692）和778073行（少于百万行）。这些演示表明，需要使用更复杂的“虚拟滚动”实现，以便在设置height 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/>");
}

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

Answer 2

我遇到了实现虚拟滚动的相同问题。我的解决方案是检测太大的数字并使用乘数。

这意味着溢出内容的高度为realHeight / multiplier。当我试图找出要显示的数据时，我只需要scrollTop * multiplier。这对用户来说很好，因为滚动条的最小高度。

如果您可以控制效果，这将有效。我不熟悉jqGrid，但可能需要更新源代码。

Answer 3

这不是问题。值2e+7与20000000相同，它只是显示数字的另一种方式。

在某些工具中，scientific notation中显示了大量数字。数字2e+7表示2 * 10 ⁷。

Answer 4

如果您的文档尺寸未修复，您可以使用：

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

并相应地设置div容器高度

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

这适用于所有浏览器

将大值设置为div的高度

4 个答案: