浏览器垂直滚动条的高度限制

为了呈现浏览器滚动条而获得的高度的最大限制在所有浏览器中具有不同的值。如果从有限高度增加1px，则浏览器滚动不会在页面中呈现。浏览器垂直滚动条的高度限制

FF：17895697px

IE：10737418px

在Chrome有呈现滚动条没有问题，但它始终在布局33554400px高度。

没有为最大像素高度基于所述浏览器的元件的reference，但对于浏览器滚动条限制没有引用。

无论如何克服这个高度问题？即当超过有限高度时，需要出现滚动条。

来源

2016-01-21 Yahwe Raj

这很有趣，但我不确定问题是什么。 – BSMP

@BSMP：我忘了添加这个问题。现在我已经添加了这个问题。 –

对于它的价值，如果我再向Chrome示例添加10个9，则滚动条消失。 – BSMP

技术上只要任何一个元素不超过最大高度，这是可能的。但出于实际的目的，这是不可能的，因为一旦整体身高超过极限，浏览器行为会变得很奇怪。

这实际上似乎在IE11上班OK：

div{ 
 
    background: red; 
 
    color: white; 
 
    height: 10737418px; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    color: white; 
 
}

<div> 
 
    Test 
 
</div> 
 
<div class="blue"> 
 
    Test 
 
</div> 
 
<div> 
 
    Test 
 
</div> 
 
<div class="blue"> 
 
    Test 
 
</div>

所有四种div S显示了应用CSS。您可以搜索单词“测试”，并且它会四次滚动到该单词。

在Firefox中，滚动的高度会比最大尺寸较大，但它会停止渲染下的所有内容：

div{ 
 
    border: 3px solid purple; 
 
    height: 17895697px; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    color: white; 
 
} 
 

 
.red { 
 
    background: red; 
 
    color: white; 
 
}

<div> 
 
    Test 
 
</div> 
 
<div class="blue"> 
 
    Test2 
 
</div> 
 
<div class="red"> 
 
    Test3 
 
</div>

第一个框有3px的紫色边框。 Firefox甚至不会渲染底部边框，而其他2 div完全不可见。浏览器可以告诉单词“测试”在页面中3次，但使用“查找”不会使页面滚动到其他div s。它只是坐在那里。

在Chrome中，事情就变得怪异：

div{ 
 
    border: 3px solid #000000; 
 
    background: #CCCCCC; 
 
    height: 99999999999999999999999999999999999999px; 
 
}

<div> 
 
    Test 
 
</div> 
 
<div> 
 
    Test2 
 
</div> 
 
<div> 
 
    Test3 
 
</div>

第一div根本不会得到一个边框上，然后由于某种原因，div边境后重复一遍又一遍第一个div即使在页面中只有两个其他div s。 Chrome浏览器的“查找”确实认识到“测试”一词仅在该页面中出现过3次，但它认为后两页位于页面的最底部。 “测试”一词在第二次或第三次不可见。

如果您将具有固定高度和溢出的容器中的元素设置为滚动，则会出现其他奇怪行为。

我可以看到解决这个问题的唯一方法是确保页面高度永远不会超出限制。

如果是静态内容，只需将其分成多个页面即可。

如果它是动态的内容，您可以：

设置多少内容被放置在页面上它产生多少额外的网页链接
地点的限制之前的任意极限内容在同一时间可见
- EX：带折叠式布局的FAQ页面，因此您必须点击问题以显示答案，并且只有一个答案可见同时
广场上有多少条记录/返回结果
隐藏/关闭/删除内容用户滚动过去的限制（我没有试过，但如果你能做到这一点我不明白为什么它不起作用。）

来源

2016-01-22 16:10:31 BSMP

基于有限高度拆分多个元素是一个不错的主意，它的工作原理非常完美。谢谢。 –

浏览器垂直滚动条的高度限制

回答

相关问题