棘手的背景颜色：可能与CSS？

我怎样才能做到这一点：

  -------------------------------
  |                     |       |
  |                     |       |
  |                     |       |
  |                     |       |
  |                     |       |
  |                     |       |
  -------------------------------
<- #fff                 | #ddd  ->

-------------------------------
|                     |       |
|                     |       |
|                     |       |
|                     |       |
|                     |       |
|                     |       |
-------------------------------

我有一个固定宽度的中间div，两列。左边的背景是白色的，右边的背景是灰色的。到目前为止还不错

现在我希望背景颜色延伸到页面边距。如上所述。这有可能吗

---

谢谢你的帮助

将居中的div宽度设为100%，然后在其中放置一个div以包含内容。

我将有一个100%的内容div，其中包含一个左右列，该列居中并具有背景色

示例如下：

---

---

如果我正确理解了您的要求，您不希望背景与div的颜色相同，但您希望它与“关节”对齐，而不管窗口的宽度如何，即使内容div是中心固定宽度容器的一部分。下面的解决方案似乎可以工作，但没有在所有浏览器中进行测试（我花了几个小时来解决）

HTML:

---

你说的“页边空白”是什么意思？HTML文档中没有这样的内容-您必须在现有元素的上方和/或下方添加额外元素，并对其进行颜色匹配。我只希望背景颜色扩展到整个浏览器窗口宽度…然后将元素扩展到整个浏览器宽度，或者在身体上使用ReeaAllyy宽的bg图像。我不认为这有助于使固定宽度容器的所有内容都变成白色，而其右侧的所有内容都变成灰色？还是我搞错了？固定宽度在另一个内，所以它在顶部居中。抱歉-刷新以获得新链接。太好了。很高兴我解释正确，找到了一个适合你的解决方案。

<div class="leftBkg">   
    <div class="content">   
        <div class="left"></div>        
        <div class="right"></div>
    </div>
    <div class="rightBkg"></div>
</div>

body {
    background-color: cyan; /* just to see no body bkg is showing */
    padding: 0;
    margin: 0;
}
.content {
    width: 700px; 
    margin: 50px auto; /* top and bottom margin for illustration */
    position: relative;
    z-index: 1; /* lift it above right background */
    overflow: auto;
}
.left {
    width: 500px; 
    background-color: #ff0000; 
    float: left; 
    min-height: 1000px; /* just for demo */
}
.right {
    width: 200px;  
    background-color: #0000ff; 
    float: left; 
    min-height: 1000px; /* just for demo */

}
.rightBkg {
    background-color: #dddddd;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    margin-left: 150px; /* (left column width - right column width) / 2 */
    z-index: 0; /* keep it below content */
}
.leftBkg {
    background-color: #ffffff;      
    position: absolute;     
    left: 0;
    width: 100%; /* make it window size */ 
    min-width: 700px; /* same as content width to keep backgrounds from scrolling horizontal on narrow window */
    min-height: 100%; /* make sure it always covers screen height */
    overflow: auto;
}