전체 너비 하위 div의 배경색

가장 바깥 쪽 부모 div의 전체 너비로 늘린 (음수 여백을 사용하여) div에 배경색을 설정하려고합니다.전체 너비 하위 div의 배경색

Here's 간단한 예 : http://jsfiddle.net/U5dnd/

흰색 DIV .featured-wrapper는 검은 DIV .site의 전체 폭을 커버하지만, 그 배경 색상 나던. 여백이 투명하다고 생각합니다.

.featured-wrapper div (음수) 여백을 포함하여 전체를 흰색으로 만드는 방법이 있습니까? (아니면 이것을 수행 할 다른 방법이 있습니까?)

고마워요!

출처

2012-09-25 Mattvic

나는 당신을 제대로 얻지 못하고 있지만 http://jsfiddle.net/swamimayank/5JH6w/를 원하십니까? –

시각적으로 말하자면, 예제에서 white child div가 왼쪽에서 오른쪽으로 검정색 배경 전체를 덮고 싶습니다. – Mattvic

.featured-wrapper { 
    background-color: white; 
    height:50px; 
    margin: 20px 0px 0 0px; 
    position:absolute; 
    width:100%; 
    z-index:100; 
    left:0; 
}

출처

2012-09-25 15:26:54

고마워요. JSfiddle에서 훌륭하게 작동합니다. 템플릿에서 몇 가지 다른 문제를 일으 킵니다.) 절대 위치 지정이 길을가는 것처럼 보이므로 그 경로를 찾아 보겠습니다. – Mattvic

확인이

JS Fiddle

CSS :

.site { 
    background-color:black;  
    padding: 0 40px; 
    height:300px; 
    width:320px; 
} 
.site-content { 
    width:100%; 
    overflow:hidden; 
} 
.wrapper { 
    overflow:hidden; 
    background-color:red; 
    height:100%; 
} 
.featured-wrapper { 
    background-color: white; 
    height:50px; 
    margin: 20px 0 0 -40px; 
    position: absolute; 
    width: 399px; 
}

HTML :

<div id="page" class="site"> 

    <div id="main" class="wrapper"> 

     <div id="primary" class="site-content"> 
      <div class="featured-wrapper"> 
       <p>This is the featured wrapper</p> 
      </div> 
    </div> 
    </div> 

</div>

출처

2012-09-25 15:39:34 Narendra

변경이 필요한지 알려주세요. – Narendra

전체 너비 하위 div의 배경색

답변

관련 문제