Question

这看似微不足道，但是我如何使div的背景颜色或图像跨越整个窗口，但是将内容保存在包装器中还是设置宽度？几乎像页脚或导航。

就像页脚中的页面一样，灰色和缺少部分会在整个页面上进行整个过程，但任何类型的设置宽度仍然与页面的其余部分相匹配。有些页面在中间有这些，并使用这种技术划分整个页面。

感谢您的帮助！

Answer 1

对于内容包装器，使包装器div固定宽度并使用margin：0 auto使其水平居中 - http://codepen.io/anon/pen/kwebf

<style type="text/css">
  body { 
    background: #ff0000; 
  }
  div {
    margin: 0 auto;
    width: 500px;
  }
</style>
<body>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</body>

对于没有包装的固定宽度内容，请在您的身体上放置水平填充 - http://codepen.io/anon/pen/hoKdk

<style type="text/css">
    body { 
        padding: 0 200px;
        background: #ff0000; 
    }
</style>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>

Answer 2

你可以将元素（A）中的每个部分包裹在整个页面中并刺激背景，然后将内容包装在元素（B）中以将其置于A中。如下所示：

<div id="main-wrap">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>
<div id="footer-wrap">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>
<style>
  #main-wrap {
    background:red;
  }
  #footer-wrap {
    background:green;
  }
  .content {
    width:300px;
    margin:0 auto;
  }
</style>

或者您可以使用类似于this one的高级解决方案。

这实际上取决于您的设计和要求

div的背景颜色/图像扩展整个页面，但内容保留在包装中

2 个答案: