设置相对于内容的父div高度，但将内容定位在父边距

Question

在我将自己设计成角落之前，我需要一些帮助！我附上了一个粗略的线框，展示了我想要实现的目标，我将通过以下方式介绍：

rough wireframe

所以我有一个标题（固定）和页脚（不固定）和一个大的整页图像。这下面的盒子是纯色，中间的容器大约在这个容器的边缘上下5％。在这个容器中是文本和图像，其中一些将通过flexbox控制以消除任何垂直松弛。这下面还有另一个整页图片，可能是幻灯片。页面的其余部分尚未确定。

我一直在玩中心部分的背景图像边距，绝对定位等。我只是不确定最好的方法。让它覆盖顶部很容易，但是让下一部分与纯色边缘对接而不是中心容器的边缘是很难的。

我的客户在其他地方看到了类似的内容，但他们只发送了一个视觉，而不是一个Url，所以我可以查看底层代码。

非常感谢任何聪明的想法！

由于

Answer 1

这就是我想要的......

将中间容器视为内容的高度，而不是背景图像的高度。在中间容器中设置匹配的背景颜色，以便所有三个容器中的背景颜色相同。然后，给中间容器一个背景图像，并限制它的大小并使其居中，因此匹配的颜色显示图像未覆盖的位置。