Html 不带容器div的背景色条

通过设置

主体

元素的样式，获得一个具有单一背景颜色的居中、最大宽度的网站非常简单，如下所示：

正文{
最大宽度：500px；
保证金：自动；
背景色：黑色；
}
标题{
高度：100px；/*可能不是静态的*/
背景色：红色；
}
#主要{
高度：300px；/*可能不是静态的*/
背景颜色：黄色；
}
页脚{
高度：200px；/*可能不是静态的*/
背景颜色：蓝色；
}

标题{
高度：100px；
/*可能不是静态的*/
背景色：红色；
位置：相对位置；
}
#主要{
高度：300px；
/*可能不是静态的*/
背景颜色：黄色；
位置：相对位置；
}
页脚{
高度：200px；
/*可能不是静态的*/
背景颜色：蓝色；
位置：相对位置；
}
页脚，
标题，
#主要{
框大小：边框框；
保证金：自动；
最大宽度：500px；
边框：2个黑点；
}
标题：之前，
#梅因：之前，
页脚：之前{
内容：''；
宽度：100vw；
转换：翻译（-50%）；
身高：100%；
左：50%；
位置：绝对位置；
z指数：-1；
}
标题：之前{
背景色：红色；
}
#梅因：以前{
背景颜色：黄色；
}
页脚：之前{
背景颜色：蓝色；
}

我的头好漂亮；
我的内容很好
我的脚很低

你能发布你想要的最终布局吗？例如，背景条是否要在以500px为中心的容器之外展开？第二个片段是最终布局的近似值。问题指出，目标是为页面内容设置一个最大宽度，每个顶层块的背景无限延伸到任意一侧，而不使用容器。行的高度是否与您的示例中的一样固定？@Constantin被弃用了20年。我还在用它；）非常聪明！可以通过添加

背景色：inherit到主
：before
选择器，允许删除单个
：before
规则。很遗憾，边框会在背景中产生间隙，但我的用例实际上并不需要边框。