棘手的背景颜色：CSS 可能吗？答案

【问题标题】：Tricky Background Colors: Possible with CSS?棘手的背景颜色：CSS 可能吗？
【发布时间】：2011-11-02 20:14:41
【问题描述】：

我怎样才能做到这一点：

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

我有一个固定宽度居中的 div，两列。左边的背景是白色的，右边的背景是灰色的。到目前为止一切顺利。

现在我希望背景颜色扩展到页边距。如上图所示。这有可能吗？

感谢您的帮助！

【问题讨论】：

“页边距”是什么意思？ HTML 文档中没有这样的东西 - 您必须在现有元素的上方和/或下方添加额外的元素，并为它们着色以匹配。
我只是想让背景颜色扩展到整个浏览器窗口宽度...
然后将您的元素拉伸到整个浏览器宽度，或者在正文上使用 reeaaalllyyy 宽 bg 图像。

标签： css background-color

【解决方案1】：

如果我正确理解您的要求，您不希望背景与 div 的颜色相同，但您希望它与“关节”对齐，无论窗口的宽度如何，即使内容 div 是其中的一部分一个居中的、固定宽度的容器。以下解决方案似乎在所有浏览器中都没有经过测试（花了我几个小时才解决）。

HTML：

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

CSS：

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;
}

【讨论】：

太棒了。很高兴我正确解释并找到了适合您的解决方案。

【解决方案2】：

我会有一个 100% 的内容 div，包含一个左右列，居中并具有背景颜色。

这里的例子： http://jsfiddle.net/MSuJT/

【讨论】：

抱歉 - 刷新以获取新链接。

【解决方案3】：

使居中的 div 宽度为 100%，然后在里面放一个 div 来包含内容。

【讨论】：

我不明白这如何帮助将固定宽度容器左侧的所有内容变为白色，并将其右侧的所有内容变为灰色？还是我搞错了？
固定宽度在另一个里面，所以它在顶部居中。