너비가 제한된 div와 결합 된 창 너비 배경

아래 이미지에서 볼 수있는 결과를 얻을 수있는 깨끗하고 멋진 코드를 만들려고합니다. Firefox, Chrome, Safari에서는 괜찮지 만 IE에서는 그렇지 않습니다.너비가 제한된 div와 결합 된 창 너비 배경

코드를 사용하여 JSFiddle을 만들었습니다.
기본적으로 모두 빨간색 막대 (창에서 가장자리까지)의 100 % 너비가 필요하지만 내용 (탐색 포함)은 너비가 제한되어야합니다. 그래서
나는 모든 브라우저에서이 작업을 만들기 위해 좋은, 깨끗한 조각을 찾고 있어요 (IE를 포함하여 ...)

enter image description here

출처

2012-02-22 Michiel

<style> 
body{ 
    background-color: #fff; 
    margin: 0; 
    padding: 0; 
} 
#subtopContainer{ 
    background-color: #f00; 
} 
#subtop, #header, #content{ 
    width: 980px; 
    margin-left: auto; 
    margin-right: auto; 
} 
#header{ 
    height: 150px; 
} 
#subtop{ 
    height: 50px; 
} 
</style> 

<div id='container'> 
<div id='headerContainer'> 
    <div id='header'></div> 
</div> 
<div id='subtopContainer'> 
    <div id='subtop'></div> 
</div> 
<div id='contentContainer'> 
    <div id='content'></div> 
</div> 
</div>

출처

2012-02-22 16:40:27 feskr

<style> 
    body { background-color: #fff; margin: 0; padding: 0; } 
    div.wrapper { margin: 0 auto; width: 980px; background: lime} 
    div.header { height: 70px; margin-bottom: 40px;} 
    div.content { height: 400px; } 
    div.bar { height: 40px; background: #f00; overflow: hidden; position: absolute; top: 70px; width: 100%;} 
</style> 

<body> 
    <div class="bar"></div> 
    <div class="wrapper"> 
    <div class="header"> 
     Header Stuff 
    </div> 

    <div class="content"> 
     In order for this to work, 

     div.bar 'top' = div.header 'height' 
     div.header 'margin-bottom' = div.bar 'height'. 
    </div> 
    </div> 
</body>

출처

2012-02-22 17:42:43

너비가 제한된 div와 결합 된 창 너비 배경

답변

관련 문제