为div的高度设置较大的值 [英] Set large value to div's height

问题描述

在某些网络浏览器(例如Firefox)中，高度限制为<div></div>时我遇到问题.我有这样的JavaScript代码:

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

但是我在萤火虫中看到了height: 2e+7px;规则. IE中也存在此问题，但是在谷歌浏览器中，一切正常，我看到了height: 20000000px;.如何以适用于大多数浏览器的方式为div的高度设置非常大的值?

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?

编辑:firefox在该div中没有​​滚动条，但是google chrome具有滚动条.

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

推荐答案

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

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

具有非常简单的HTML标记

with very simple HTML markup

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

人们可以在Google Chrome浏览器中看到预期的结果

One can see in Google Chrome the expected results

但是Firefox显示

but Firefox shows

以及IE10和IE11显示

and IE10 and IE11 displays

相反.

顺便说一句，将在div上设置大height来实现虚拟滚动"(例如，在height设置问题.

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>

这篇关于为div的高度设置较大的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！