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 来强制滚动条，但它不会改变行为。

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

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

Answer 1

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