html - 要素がページ全体に広がる中央固定幅レイアウト

Question

中央揃えの固定幅レイアウトのページがあります。これを行うには、すべてを でラップしdiv、固定幅と を追加しmargin: autoます。しかし、ページ全体 (背景のみ) に広がる背景を持つ見出しがあります。これを行う方法はありますか (単一の固定幅 + マージンの自動 div を多くの div に分割することなく)。

Answer 1

Similar, but yet an example of a simple and usable solution: 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

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 3

あまりエレガントではありませんが、ここに解決策があります: 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;
}