html - Centered fixed-width layout with elements extending over the whole page

Question

I have a page with a centered fixed-width layout. I do this by wrapping everything in a div, adding a fixed width and margin: auto. But then I have headings that shall have a background that extends over the whole page (only the background). Is there a way to do this at all (without breaking up the single fixed-width+margin auto div into many many divs)?

Answer 1

类似，但又是一个简单且可用的解决方案的示例：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;  
}

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

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/