CSS：如何强制对象留在容器内，但允许全宽度背景？

Question

这里是草图，以便更好地解释我想实现（红色线是不可见的容器）：

我想在页眉和页脚的对象停留在固定宽度的容器内，但允许页眉和页脚有填充浏览器窗口全宽的背景颜色。我怎么做？

Answer 1

不要试图使图中红线所代表的区域成为单个元素。

对于每个块：

• 设置一个全宽元件上的背景。
• 在里面放一个宽度约束元素。
• 将内容放入宽度受限元素中。

---

考虑使用一个类来描述约束宽度元件因此可以重用其CSS为每个有三个块。