html – 浏览器垂直滚动条的高度限制
渲染浏览器滚动条获得的最大高度限制在所有浏览器中都有各种值.如果从有限高度增加1px,则浏览器滚动将不会在页面中呈现.
FF:17895697px IE:10737418px 在Chrome中,渲染滚动条没有问题,但在布局中它的高度始终为33554400px. 基于浏览器的元素的最大像素高度为reference,但没有参考浏览器滚动条限制. 无论如何要克服这个高度问题?即,当超出限制高度时,需要出现滚动条. 解决方法
从技术上讲,只要任何一个元素不超过最大高度,这是可能的.但是出于实际目的,这是不可能的,因为一旦整体身高超过极限,浏览器行为会变得怪异.
这实际上似乎在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:带有手风琴布局的FAQ页面,因此您必须单击问题才能显示答案,并且一次只能看到一个答案 >限制返回的记录/结果数量>隐藏/折叠/删除用户滚过的内容(我没有尝试过,但是如果你能做到这一点,我不明白为什么它不起作用.) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |