下方带有固定内容的可滚动覆盖答案

【问题标题】：Scrollable Overlay with Fixed Content Underneath下方带有固定内容的可滚动覆盖
【发布时间】：2019-01-19 19:44:32
【问题描述】：

我需要让这个示例中的叠加层能够一直滚动到屏幕外。内容需要位于固定位置，如下例所示。如何让覆盖 div 一直滚动到视口之外？

HTML

<div class="test-overlay"></div>
    <div class="test-content-container"></div>

CSS

.test-overlay {
    background: orange;
    position: relative;
    width: 100%;
    height: 100vh;
    text-align: center;
    z-index: 995;
}

.test-content-container {
    background: rgba(156,64,81,1.00);
    position: fixed;
    top: 0px;
    left: 0px;
    font-size: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
}

【问题讨论】：

标签： javascript html css

【解决方案1】：

我通过在包含这两个元素的容器 div 的底部添加 100% 填充来解决此问题。

HTML

<div class="test-complete-container">
<div class="test-overlay"></div>
    <div class="test-content-container"></div>
</div>

CSS

.test-overlay {
    background: orange;
    position: relative;
    width: 100%;
    height: 100vh;
    text-align: center;
    z-index: 995;
}

.test-content-container {
    background: rgba(156,64,81,1.00);
    position: fixed;
    top: 0px;
    left: 0px;
    font-size: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
}
    .test-complete-container {
        height: 100%;
        width: 100%;
        padding-bottom: 100%;
    }

【讨论】：