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

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 divs 根本不可见。浏览器可以判断单词 "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 的 "Find" 确实识别出单词 'Test' 只在页面中出现了 3 次，但它认为后两次出现在页面的最底部。 'Test' 一词在第 2 次或第 3 次不可见。

如果将高大的元素放入高度固定且溢出设置为滚动的容器中，则会出现其他奇怪的行为。

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

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

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

在页面生成 link 到其他页面之前设置任意限制在页面上放置多少内容
限制一次可以看到多少内容
- EX：带有手风琴布局的 FAQ 页面，因此您必须单击问题才能显示答案，并且一次只能看到一个答案
限制返回的数量 records/results
Hide/collapse/remove 用户滚动过去的内容（我没试过，但如果你能做到，我不明白为什么它不起作用。）

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

Height limitations for browser vertical scroll bar

html

css

height