html - ul 传播和覆盖 CSS（也需要垂直滚动条）

Question

我有一个 ul，我已经传播了很多图像。图像通常足够多，以至于需要滚动条。图像与相似的 ul 之间存在拖放交互。两个 ul 都需要在屏幕上可见，所以我需要滚动条。我已经手动设置了，这里是 ul 的 CSS：

border: 2px solid black;
height: 70%;
list-style-type: none;
overflow-y: scroll;

无论如何，我希望高度为屏幕的 70%，但如果使用 %，ul 只会从屏幕扩展，浏览器本身会获得滚动条。我设置了 overflow-y 来强制滚动条，但它不会改变行为。

我正在使用引导网格来调整元素的大小。我需要这个 ul 可以与页面内容的其余部分一起调整大小，但我似乎可以阻止 ul 的内容扩展它的唯一方法是将其设置为静态高度。

有谁知道如何做到这一点或为什么 CSS 百分比值在这里似乎不起作用？我查看了 Firefox 开发者工具，高度：70%；还在，没有划掉。

标签： htmlcssoverridinghtml-lists

Answer 1

如果您希望高度为屏幕的 70%。然后使用 vh 代替 %。视口高度 (vh) – 整个视口高度的百分比。10vh 将解析为当前视口高度的 10%。