Javascript Google Chrome中大于16777216像素的内容未呈现
我最近发现我在谷歌chrome中的内容在长度超过16777216px时没有被呈现 完整HTML：Javascript Google Chrome中大于16777216像素的内容未呈现,javascript,jquery,html,css,google-chrome,Javascript,Jquery,Html,Css,Google Chrome,我最近发现我在谷歌chrome中的内容在长度超过16777216px时没有被呈现 完整HTML： <html> <head> <style> #content { height: 16777316px; position: relative; font-size: 2em; font-weight: 700; } #semi-hidden { position: absolute; bottom: 0;
<html>
<head>
<style>
#content {
height: 16777316px;
position: relative;
font-size: 2em;
font-weight: 700;
}
#semi-hidden {
position: absolute;
bottom: 0;
background-color: #000000;
color: #ffffff;
height: 200px;
width: 50%;
float: left;
}
#hidden {
position: absolute;
bottom: 0;
background-color: #ffffff;
color: #000000;
height: 100px;
width: 50%;
float: right;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="content">Scroll Down ↓
<div id="semi-hidden"> The Bottom 100px of this DIV is not rendered. </div>
<div id="hidden"> This DIV is completly hidden. </div>
</div>
</body>
</html>
#内容{
高度：16777316px；
位置：相对位置；
字号：2em；
字号：700；
}
#半隐藏{
位置：绝对位置；
底部：0；
背景色：#000000；
颜色：#ffffff；
高度：200px；
宽度：50%；
浮动：左；
}
#隐藏的{
位置：绝对位置；
底部：0；
背景色：#ffffff；
颜色：#000000；
高度：100px；
宽度：50%；
浮动：对；
}
无标题文件
向下滚动&darr；
未渲染此DIV的底部100px。
这个DIV是完全隐藏的。
编辑：这是因为Google Chrome不支持大于16777216 px的布局。Google Chrome使用布局单位表示布局元素位置，可以表示有符号整数（2^31/64整数值或+/-16777216）的1/64空间 谷歌Chrome无意在不久的将来支持更大的价值
也许是因为它太长了？在长度超过四英里的60dpi显示器上，您发现的数字可疑地接近16777216，即2²，这一点值得注意⁴.