Android CSS 滚动条根据距上边框的距离偏移——为什么？

Question

我正在为 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 开始的地方开始。滚动条的高度是应该的。当我滚动列表时，滚动会经过预期的高度，但 100 像素太低了。滚动条的底部延伸到 DIV 底部的下方。

明显的解决方法是使用 top:0px。有更好的答案吗？

提前致谢， 杰罗姆。

Answer 1

如果没有看到现场演示，很难调试它，但现在就开始吧。我假设您在 divVerticalList 上设置了 top:0px，这是有道理的，您已将 divVerticalList 列表设置为绝对位置，这意味着它在文档坐标中将 divVerticalList 的顶部设置为 100px。这意味着 divVerticalListUL 也距离文档顶部 100px。

93%的高度计算是基于93%的600px，所以当你设置top:100px时，你视口(viewport)的末端是700px(600+100px)但是你还是600px高。内部元素的大小仍为 600 = 558px 的 93%，在大多数情况下仍会从屏幕上弹出。