我正在为Android / Chrome和iPad / Safari写一个HTML5应用程序。在其中,我用overflow:auto和top:XXpx创建一个DIV。这是一个示例:
<div id="divVerticalList" style="width: 180px; height: 600px; position: absolute; left: 100px; top: 200px;">
<div id="divVerticalListUL" style="overflow: auto; width: 100%; height: 93%;">
<ul id="distDV" class="pickList">
<li id="distDVu30" value="30" class="evenLi">+30</li>
如果top:0px,则divVerticalListUL出现在屏幕顶部,并且滚动条从divVerticalListUL的顶部开始操作。滚动条的大小正确,可以显示DIV高度中列表内容的一部分。滚动列表是可以的。
如果top:100px,则DIV向下显示100个像素,滚动条从DIV的开始向下显示100个像素。它应该在DIV开始的地方开始。滚动条的高度应该是应该的。当我滚动列表时,滚动会经过预期的高度,但太低100px。滚动条的底部在DIV的底部下方延伸。
显而易见的解决方法是使用top:0px。有更好的答案吗?
提前致谢,
杰罗姆。
最佳答案
在不观看实时演示的情况下,调试它确实很困难,但是可以使用。我假设您在divVerticalList上设置top:0px,这很有意义,您已将divVerticalList列表设置为绝对位置,这意味着它将divVerticalList的顶部设置为文档坐标中的100px。这意味着divVerticalListUL也距文档顶部100px。
93%的高度计算基于600px的93%,因此,当您设置top:100px时,视口的末端为700px(600 + 100px),但高度仍为600px。内部元素的大小仍为600 = 558px的93%,在大多数情况下仍会从屏幕上移开。