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

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

html css

Html div的背景色/图像扩展整个页面，但内容仍保留在包装中,html,css,Html,Css,这看起来很琐碎，但如何使div的背景色或图像覆盖整个窗口，同时将内容保存在包装器中或设置宽度？几乎像一个页脚，或导航与页脚中的这一页一样，灰色部分和空白部分贯穿整个页面，但任何类型的字体仍在与页面其余部分匹配的设置宽度内。有些页面中间有这些，然后用这个技术划分整个页面。谢谢你的帮助对于内容包装，将包装div设置为固定宽度，并使用margin:0 auto将其水平居中- 正文{ 背景：#ff0000； } div{ 保证金：0自动；宽度：500px； } Lorem ipsum dolo

这看起来很琐碎，但如何使div的背景色或图像覆盖整个窗口，同时将内容保存在包装器中或设置宽度？几乎像一个页脚，或导航

与页脚中的这一页一样，灰色部分和空白部分贯穿整个页面，但任何类型的字体仍在与页面其余部分匹配的设置宽度内。有些页面中间有这些，然后用这个技术划分整个页面。

谢谢你的帮助

对于内容包装，将包装div设置为固定宽度，并使用margin:0 auto将其水平居中-


正文{
背景：#ff0000；
}
div{
保证金：0自动；
宽度：500px；
}
Lorem ipsum dolor sit amet，是一位杰出的献身者

对于没有包装的固定宽度内容，请在身体上放置水平衬垫-


正文{
填充：0 200px；
背景：#ff0000；
}
Lorem ipsum dolor sit amet，是一位杰出的献身者

您可以将每个部分包装在一个元素（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>


Lorem ipsum dolor sit amet，是一位杰出的献身者
Lorem ipsum dolor sit amet，是一位杰出的献身者
#主包装{
背景：红色；
}
#页脚环绕{
背景：绿色；
}
.内容{
宽度：300px；
保证金：0自动；
}

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

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

对不起，我要的是宽度，不是高度。请尝试阅读，只需更改代码，使其符合您想要的宽度即可。

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

<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>