까다로운 배경 색상 : 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/

---