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

Question

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

我希望页眉和页脚中的对象保持在固定宽度容器内，但允许页眉和页脚的背景颜色填充浏览器窗口的全宽。我该怎么做？

Answer 1

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

对于每个区块：

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

考虑使用类来描述受约束的宽度元素，以便您可以为您拥有的三个块中的每一个重用其CSS。