html - 子 Div 与父 Div 大小相同 100%(仅限 CSS)

Question

我想要两个高度为 100% 的 div。

父 div 应填充图像并自动调整大小。

子 div 应该像一个滤色器。调整空洞页面大小时，它必须具有父级的 div 大小。

我在 Internet 上找到了一些与我的解决方案存在相同问题的方法:在调整页面大小时，子 div 变得比父 div 更大或更小。

.main_slide_back {
    top: 0px;
    left: 0px;
    margin: -8px 0 0 -8px;
    width: calc(100% + 16px);
    height: 100%;
    z-index: 1;
}
.main_slide_back:after {
    content:'';
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #08598D;
    opacity: 0.4;
}
.main_slide_back img {
    width: 100%;
    height: 100%;
}

Here is a Fiddle

提前致谢。托比

Answer 1

只需将相对位置添加到祖先。 Modified fiddle .

.main_slide_back {
    position: relative;
}