儿童Div与父母Div相同的尺寸100％（仅限CSS）

I want to have two divs with 100% height.

我希望有两个高度为100％的div。

The parent div should be filled with an image and become auto-sized.

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

The child div should be like a color filter. It must have the parent's div size when the hole page is resized.

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

I found a few ways on the Internet with the same problem as my solution: while resizing the page the child div is getting bigger or smaller than the parent div.

我在互联网上发现了一些与我的解决方案相同的问题：在调整页面大小时，子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

这是一个小提琴

Thanks in advance. Tobi

提前致谢。托比

1 个解决方案

#1

Just add relative position to ancestor. Modified fiddle.

只需添加相对位置给祖先。修改小提琴。

.main_slide_back {
    position: relative;
}