2

有一个奇怪的问题（奇怪是因为我看不懂）

尝试使用 100% 高度的 jQuery UI 选项卡和内容的垂直溢出滚动条。

这不起作用 - 可滚动区域大于可见区域，导致滚动条的下部低于可见区域。看起来滚动区域随着列表区域的高度而扩展。

该问题仅在 100% 高度时有效（以不同的方式对此进行测试）。一旦我设置了固定高度（以某种方式），问题就消失了？？？

经过一些测试后发现 UI 不应该受到责备，并且该问题对于本机列表项也有效。

我的设置是这样的：

  • 我需要使用所有可用空间（完整的 iframe、div、窗口）
  • 我不知道顶级列表的高度。
  • 我需要将剩余空间用于垂直溢出的内容
  • 不会使用脚本来修改高度（必须单独使用 CSS 和 HTML5）

你可以在这里看到一个演示：

http://jsfiddle.net/beasty/6cAat/10/

关于如何修复它的任何建议？

谢谢本尼

4

2 回答 2

1

css 属性 height: 100% 对相对定位的元素没有影响。

<div style="position: relative; height: 100%; border-style: solid; border-width:2px;">

    <div id="contenttab" style="position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow-y: auto;">

        Looong text

    </div>
</div>

这是一个更好的方法来做到这一点。您仍然必须确定绝对定位的 div 上方的列表高度。

于 2012-08-09T20:13:18.753 回答
0

这是因为顶级div元素隐藏了它的溢出。它的子div元素超出了其父元素的高度，因为它的高度是 100%。浏览器计算父级的高度，在本例中为 643 像素。所以孩子也是 643 像素，即使它必须与高度为 60 像素的无序列表共享可见空间。因此，子div元素的 60 像素是隐藏的。

作为一种解决方案，您可以将高度设置ul为 10%，将孩子div设置为 90%。但小心点！您正在使用高度声明中未包含的边框，因此您仍然会丢失一定数量的子 div，这与您正在使用的边框像素数完全相同。此外，如果它ul不断增长，它的内容也可能会从视野中消失。最好不要为孩子div或 the指定高度ul，而是允许父母div溢出-y。否则它看起来有点“框架-y”。

于 2012-08-09T20:09:22.813 回答