棘手的背景顏色：可能與CSS？

Question

我怎樣才能得到這樣的：

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

我已經有了一個固定的寬度居中格，兩列。左邊的是白色的背景，右邊的背景是灰色的。到現在爲止還挺好。

現在我想將背景顏色擴展到頁邊距。如上所述。這是否有可能？

感謝您的幫助！

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

Answer 2

將居中的div寬度設爲100％，然後在裏面放一個div來包含內容。

Answer 3

我將有一個100％的內容div，包含左右列，以居中爲背景顏色。

這裏舉例： http://jsfiddle.net/MSuJT/

---