Css 具有不同边距颜色和居中内容的网页

我想建立一个网页，我的内容是集中的，但响应-它应该是一个最大宽度为960像素，但如果窗口大小减少减少减少。 同时，我希望在页面的左右边距上有不同颜色的背景。 我怎样才能做到这一点？ 如果我在主div上使用margin:0 auto，我将无法再控制背景。

HTML

---

对于您将拥有的内容

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

对于背景色，您可以尝试以下技巧（这些技巧将应用于内容）

---

只要让它有一个

最大宽度和一个百分比宽度，两边都有自动边距。
如果你想拥有一个多色的身体背景，你可以在背景上放置两个盒子，给每个盒子一个不同的颜色。例如，现在使用负z索引将这些对象放置在背景上，以便其他对象保持在视口中。在这里，我为您制作：

来源：

全屏查看：

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%的高度

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

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;

#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;
}