css - 棘手的背景颜色 : Possible with CSS?

Question

我怎样才能做到这一点:

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

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

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

感谢您的帮助!

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