html - 具有水平居中内容的布局的两种背景颜色

Question

引用上图，我想创建以下网页布局:

• 第 1 列和第 4 列是可变边距
• 第 2 列 + 第 3 列 = 用于显示内容的固定宽度容器
• 第一列和第二列的背景色相同
• 第3列和第4列的背景色相同

到目前为止，我已经尝试对第 1 列和第 4 列使用一些 position:fixed hack，但我希望有更好的方法来实现这一点。 My fiddle

Answer 1

我发现最好的方法是简单地使用背景渐变。

HTML:

<div id="container">
     <div id="left"></div>
     <div id="right"></div>
</div>

CSS:

body {
    background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);
}

如果有人感兴趣，请更新 fiddle :fiddle