Html 扩展到父容器的子容器的CSS背景色

需要子容器的背景色延伸到视图点的宽度。所需的属性应仅应用于子容器

我试着给子容器加上巨大的边框，直到父容器，但在高分辨率屏幕上都不起作用

背景色应仅应用于文本区域

.outer{
高度：自动；
边框：1px纯红；
宽度：420px；
}
.内部{
左边距：100px；
右边距：100px；
宽度：200px；
高度：300px；
边框：1px纯绿色；
}

需要子容器的背景色延伸到视图点的宽度。必须仅在子容器中提供所需的属性。

不完全确定我是否理解您的意图，但我尝试了一下

在CSS中，如果将边距更改为padding，则子元素上的任何背景颜色都将延伸到父元素。背景色包括填充，但不包括边距

我还必须把孩子的宽度调高20像素，这样才能正确填充

更新小提琴：

---

您可以将包装设置为包含所需颜色，如下所示：

.bg包装器{
背景：#54BCDF；/*更改为所需颜色*/
}
.外部{
高度：自动；
边框：1px纯红；
宽度：420px；
保证金：0自动；
}
.内部{
左边距：100px；
右边距：100px；
宽度：200px；
高度：300px；
边框：1px纯绿色；
}

需要子容器的背景色延伸到视图点的宽度。必须仅在子容器中提供所需的属性。

将父对象的位置设置为相对：

.outer {
  position: relative;
}

.inner {
  position: relative;
}

然后在子元素上创建一个伪元素，它覆盖父元素的范围（宽度和高度100%）

为其设置负z索引，以便其背景不会隐藏内容：

.inner:before {
  content: '';
  background: lightgreen;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: -1;
}

---

根据无法设置父项样式的事实进行更新

将子对象的位置设置为相对：

.outer {
  position: relative;
}

.inner {
  position: relative;
}

伪元素的宽度现在应该是100%加上子元素和父元素宽度之间的差值

您需要将伪元素向左移动以说明子元素的左边距：

.inner:before {
  content: '';
  background: lightgreen;
  position: absolute;
  height: 100%;
  width: calc(100% + 220px);  /* parent's width - child's width = 220 */
  left: -100px;               /* account for left margin */
  z-index: -1;
}

---

使用填充而不是边距，这是正确的方法

padding: 0 100px;

---

您可以删除固定宽度吗？子容器的宽度是固定的，左右两端都有边距。基本上，页面内容放在内部容器中。您希望子容器的大小与父容器的大小相同，但将文本限制在200X300的正方形内吗？抱歉，我忘了提到背景颜色仅用于内容。@Sandeep您可以添加一个图像链接，以准确查看您想要实现的目标吗？需要背景，如附加图像中的扩展内容div。在这种情况下，无法编辑父容器的CSS属性。需要从子容器CSS本身呈现的任何更改。