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

Question

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

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

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

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

Answer 1

如果你的文档大小不固定，你可以使用这个：

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

并相应地设置您的 div 容器高度

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

这应该适用于所有浏览器

Answer 2

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

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

Answer 3

我只想确认描述 hamed 的问题。可以在测试 div:

上使用 jQuery.css 尝试包含设置 height 属性的演示 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预期的结果

但 Firefox 显示

以及 IE10 和 IE11 显示

相反。

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

Answer 4

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

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

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

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

Set large value to div's height

javascript

html

browser

scroll

scrollbar