1

我正在为 Android/Chrome 和 iPad/Safari 编写 HTML5 应用程序。在其中我创建了一个带有溢出：自动和顶部：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。有更好的答案吗？

在此先感谢，杰罗姆。

4

1 回答 1

0

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

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

于 2013-09-16T12:53:24.803 回答