html - CSS 位置固定保持高度

Question

我有一个包含内容的 div 和一个只是包装器的外部 div。我正在尝试将 css 从外部 div 合并到内部 div，这样我就可以删除外部 div。当我这样做时，div 不再可见(假设因为高度为零)。我想可能是顺序问题，所以我尝试重新排列 css，但还是不行。

#div1 {
    min-height: 200px;
    width: 100vw;
}

#div2 {
    /* min-height: 200px;
    width: 100vw; */
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #74CFAE;
    font-size: 25px;
    line-height: 40px;
    z-index: -1;
}

#div3 {
    position: relative;
    height: 600px;
    width: 100vw;
    background-color: #333;
}

<div id="div1">
    <div id="div2">
        <p> I want the following div to scroll over this content.</p>
    </div>
</div>

<div id="div3"></div>

如果您注释掉“div1”的 css 并将其与“div2”结合使用，您就会明白我在说什么。

这种情况需要包装器吗？还是我的 CSS 本身存在问题？

Answer 1

我的看法:如果您知道 div2 的高度，则可以删除 div1，但您必须将 div3 放在明确的顶部。如果您不知道 div1/2 高度并且不想动态重新定位 div3，那么将 div1 作为包装器似乎是一个很好的解决方案。已知 div2 高度的建议:

#div2 {
    height: 100px
    width: 100vw;
    position: fixed;

    background-color: #74CFAE;
    font-size: 25px;
    line-height: 40px;
    z-index: -1;
}

#div3 {
    position: relative;
    height: 600px;
    width: 100vw;
    background-color: #333;
    top: 100px;
}

https://jsfiddle.net/oahurc53/1/