当背景颜色在整个页面上延伸时，如何处理固定宽度布局

Question

我正在尝试构建一个页面，其中全局存在固定宽度，以便所有内容都在屏幕中间居中，就好像所有内容都包含在包装器中一样。在下面的示例中，父div max-width设置为500px。

此网站上的某些部分的背景颜色或背景图片需要在整个页面宽度上展开，如下面蓝色div的示例所示。我已将此div设置为position:absolute，以超出其父级的宽度设置。

但是，如果我想要包含蓝色div中的内容，我希望此内容遵守500px的全局固定宽度设置，该怎么办？在下面的示例中，您可以看到绿色div不在max-width: 500px;设置中，而是继承其直接父级的宽度，蓝色div。

有没有办法让绿色div跟随全球max-width？

<div style="max-width: 500px; height: 1000px; background-color: red; margin: 0 auto;">
  <div style="position: absolute; width: 100%; height: 400px; background-color: blue; left: 0; top: 50px;">
    <div style="position: absolute; width: 500px; height: 300px; background-color: green; top: 50px;">
    
    </div>
  </div>
</div>

这是我正在谈论的图片：

例如，中间div的背景横跨页面的宽度。但它包含具有固定宽度的内容。

Answer 1

表示绿色div：宽度：500px;身高：300px;背景颜色：绿色;保证金：50px auto 0px auto;

如果你真的想要那样，但我建议你不要把蓝色的div嵌入红色的那个。