html - Child Div same size as parent Div 100% (CSS Only) -

i want have 2 divs 100% height.

the parent div should filled image , become auto-sized.

the child div should color filter. must have parent's div size when hole page resized.

i found few ways on internet same problem solution: while resizing page child div getting bigger or smaller parent 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 fiddle

thanks in advance. tobi

just add relative position ancestor. modified fiddle.

.main_slide_back {     position: relative; }