居中的固定寬度佈局，其元素在整個頁面上延伸

Question

我有一箇中心固定寬度佈局的頁面。我通過將所有東西都包裝在div中，添加固定寬度和margin: auto。但是，我的標題應該有一個覆蓋整個頁面的背景（只有背景）。有沒有辦法做到這一點（沒有將單個固定寬度+ margin margin auto div分解爲許多div）？

Answer 1

您可以使用絕對定位在那些div s的模擬元素：

#main-page { 
    width: 50%; 
    margin: 0 auto; 
} 
div.full-width { 
    position: relative; 
    background: black; 
} 
div.full-width:before, div.full-width:after { 
    content: ""; 
    position: absolute; 
    background: black; /* Match the background */ 
    top: 0; 
    bottom: 0; 
    width: 9999px; /* some huge width */ 
} 
div.full-width:before { 
    right: 100%; 
} 
div.full-width:after { 
    left: 100%; 
} 

看看這個教程：http://css-tricks.com/full-browser-width-bars/

Answer 2

不是很優雅，但這裏是一個解決方案：http://dabblet.com/gist/2789029 - 它使用巨大的負面利潤率和相同的填充。

這是卓有成效：

body { 
    overflow-x: hidden; 
} 
.central { 
    width: 400px; 
    margin: 0 auto; 
    outline: solid 1px red; 
} 
h1 { 
    margin: 5px -2000px; 
    padding: 5px 2000px; 
    outline: solid 1px blue; 
    background: cyan; 
} 

Answer 3

相似，但還沒有一種簡單和實用的解決方案的一個示例：http://jsfiddle.net/grE5A/41/

#main_container { 
    width:400px; 
    min-height:360px; 
    margin:10px auto; 
    background:#000; 
    overflow:visible; 
} 

#heading_div_bg { 
    background-color:green; 
    height:50px; 
    width:100%; 
    position:absolute; 
    margin:0px auto; 
    left:0px; 
    top:50px; 
} 

#heading_div { 
    background-color:darkgreen; /*set to same as header_div*/ 
    text-align:center; 
    height:50px; 
    width:400px; /*same as container*/ 
    position:relative; 
    margin: 0 auto; 
}