Set background of container depends on the height of the inner box

I want to implement the effect below:

I try to set the footer part (yellow part in the picture) margin-top: -30px, but it will cover the inner box (green part in the picture), so how to make the yellow part under the green part. The height of the green part is not fixed.