Question

渲染浏览器滚动条获得的高度的最大限制在所有浏览器中都有各种值。如果从有限高度增加1px，则浏览器滚动将不会在页面中呈现。

FF：17895697px

IE：10737418px

在Chrome中，渲染滚动条没有问题，但布局中的高度始终为33554400px。

基于浏览器，元素的最大像素高度有reference，但浏览器滚动条限制没有参考。

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

Answer 1

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

这实际上似乎在IE11中正常工作：

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都显示应用了CSS。您可以搜索单词“test”，它将四次滚动到该单词。

在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根本不可见。浏览器可以告诉页面中的“test”一词3次，但使用“Find”不会使页面滚动到其他div。它只是坐在那里。

在Chrome中，事情变得奇怪：

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

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

第一个div根本没有边框，然后由于某种原因div边框在第一个div之后反复重复，即使只有另外两个页面中显示div。 Chrome的“查找”确实认识到“测试”一词仅在页面中出现3次，但它认为后两个位于页面的最底部。第二次或第三次看不到“测试”这个词。

如果你把高大的元素放在一个固定高度和溢出设置为滚动的容器中，你会得到其他奇怪的行为。

我能看到解决这个问题的唯一方法是确保页面高度不会超过限制。

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

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

在生成指向其他网页的链接之前，对页面上的内容设置任意限制
限制一次可见的内容
- EX：带有手风琴布局的常见问题解答页面，因此您必须单击问题才能显示答案，并且一次只能看到一个答案
限制返回的记录/结果数量
隐藏/折叠/删除用户滚过的内容（我没有尝试过，但如果你能做到这一点，我不明白为什么它不会起作用。）

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

1 个答案: