html - 如何使用纯 CSS 覆盖以填充可滚动的父级？

Question

这是一个简单的例子:

<div class = "has-scrollbar">
    <div class = "long"></div>
    <div class = "overlay"></div>
</div>

.has-scrollbar {
    width: 200px;
    height: 100px;
    overflow-y: scroll;
    position: relative;
}

.long {
    height: 200px;
    width: 50px;
    background: blue;
}

.overlay {
    width: 100%;
    height: 100%;
    background: red;
    opacity: 0.5;
    position: absolute;
    top: 0;
}

JsFiddle

红色覆盖层应完全填满父容器。 .long 的高度是事先不知道的。 .has-scrollbar div 应该仍然可以滚动(并且不被覆盖)。

任何在 .overlay 上使用 position: fixed 的解决方案都不太可能奏效。现实世界的情况要复杂得多。考虑 .has-scrollbar 在 body 中的位置也不能提前知道。

Answer 1

所以你不知道 long，但看起来你确实控制了 has-scrollbar，所以你可以使 overlay 固定和将其放置在与 has-scrollbar 相同的位置:

.overlay {
    height: 100px;
    margin-top: 8px; /* just to compensate for body margin in the example */
    pointer-events: none; /* mouse events will pass through */
    position: fixed;
    width: 200px;
}

Updated JSFiddle.