CSS：如何強制對象留在容器內，但允許全寬度背景？

Question

這裏是草圖，以便更好地解釋我想實現（紅色線是不可見的容器）：

我想在頁眉和頁腳的對象停留在固定寬度的容器內，但允許頁眉和頁腳有填充瀏覽器窗口全寬的背景顏色。我怎麼做？

Answer 1

不要試圖使圖中紅線所代表的區域成爲單個元素。

對於每個塊：

• 設置一個全寬元件上的背景。
• 在裏面放一個寬度約束元素。
• 將內容放入寬度受限元素中。

---

考慮使用一個類來描述約束寬度元件因此可以重用其CSS爲每個有三個塊。