css - 余白の色が異なり、コンテンツが中央に配置された Web ページ

Question

コンテンツが中央に配置されているがレスポンシブなページを作成したいと考えています。最大幅は 960 ピクセルですが、ウィンドウ サイズが小さくなると小さくなります。同時に、このページの背景を左右のマージンで異なる色にしたいと考えています。どうすればそれを達成できますか？メイン div で margin:0 auto を使用すると、背景を制御できなくなります。

Answer 1

あなたが持っているコンテンツのために

<div id="page">
  <div id="content"></div>
</div>

cssファイルに入れると

page { 
  width: 100%;
  background: #333; }

content {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto; }

背景色については、このようなトリックを試すことができます（これらはコンテンツに適用されます）

border-right: 10px solid #blue;
border-left: 10px solid #white;

Answer 2

max-width両側にマージン auto を付けて、a とパーセント幅にするだけです。マルチカラーのボディ背景が必要な場合は、背景に 2 つのボックスを配置して、それぞれに異なる色を指定できます。たとえば、負の z-index を使用して背景にそれらを配置し、残りがビューポートにとどまるようにします。ここで、私はあなたのためにそれを作りました：

ソース: http://jsfiddle.net/p8ZNz/4/

全画面表示: http://jsfiddle.net/p8ZNz/4/embedded/result/

CSS :

#left{
width:50%;
height:100px;
position:absolute;
top:0;
left:0;
background-color:red;
z-index:-1;
}   
#right{
width:50%;
height:100px;
position:absolute;
top:0;
left:50%;
background-color:blue;
z-index:-1;
}
#content{
position:relative;
width:90%;
height:100px;
max-width:960px;
margin:0px auto;
background-color:green;
color:#FFF;
}

背景はすべての幅で 50% ～ 50% のままで、ウィンドウのサイズを変更すると中央のボックスが 960px 幅に達するまで拡大されます。背景を完成させたい場合は、高さを 100% にしてください。

Answer 3

http://jsfiddle.net/iambriansreed/Sw9ae/

HTML

<div class="left"></div>
<div class="right"></div>
<div class="centered">centered</div>

CSS

.left,.right {
    position: absolute;
    width: 100px;
    top: 0;
    bottom: 0;
}
.left {
    left: 0;
    background: blue;
}
.right {
    right: 0;
    background: red;
}
.centered {
    position: relative;
    margin: 0 auto;
    max-width: 400px;
    background: #ccc;
}​