Html 在非100%宽度父项中显示100%宽度子项

我有一个最大宽度为1024px的div，我有一个需要从屏幕左侧开始100%宽度的子div

是否可以不引入额外的标记？我知道可以让孩子100%的宽度：100vw；但似乎不能把它推到左边

html

---

您可以使用绝对定位的伪元素执行此操作。我必须添加一个隐藏溢出的包装器，否则会添加一个水平滚动条。有人可能会想出如何使用包装器

.wrapper{
溢出：隐藏；
边缘顶端：40px；
}
.家长{
最大宽度：800px；
保证金：0自动；
}
.孩子{
边缘顶部：20px；
填充：20px；
宽度：100%；
背景：灰色；
位置：相对位置；
}
.child:之前，.child:之后{
内容：“；
位置：绝对位置；
排名：0；
身高：100%；
宽度：100%；
背景：灰色；
}
.孩子：以前{
左-100%；
}
.孩子：以后{
右图：-100%；
}

内容

您可以使用绝对定位的伪元素执行此操作。我必须添加一个隐藏溢出的包装器，否则会添加一个水平滚动条。有人可能会想出如何使用包装器

.wrapper{
溢出：隐藏；
边缘顶端：40px；
}
.家长{
最大宽度：800px；
保证金：0自动；
}
.孩子{
边缘顶部：20px；
填充：20px；
宽度：100%；
背景：灰色；
位置：相对位置；
}
.child:之前，.child:之后{
内容：“；
位置：绝对位置；
排名：0；
身高：100%；
宽度：100%；
背景：灰色；
}
.孩子：以前{
左-100%；
}
.孩子：以后{
右图：-100%；
}

内容

这很有效

.child {
  position: absolute;
  margin-top: 20px;
  padding: 20px;
  width: 100vw;
  background: grey;
  left: 0;
  box-sizing: border-box;
}

这很有效

.child {
  position: absolute;
  margin-top: 20px;
  padding: 20px;
  width: 100vw;
  background: grey;
  left: 0;
  box-sizing: border-box;
}

是否可以不引入额外的标记？我知道可以让孩子100%的宽度：100vw；但似乎不能把它推到左边

你想把什么推到左边？子元素？如果是，则父级具有左边距：自动和右边距：自动（速记边距：0自动）。这样，您将使父元素居中，因此子元素也随之居中

您可能需要使用

margin:0取而代之

是否可以不引入额外的标记？我知道可以让孩子100%的宽度：100vw；但似乎不能把它推到左边

你想把什么推到左边？子元素？如果是，则父级具有左边距：自动和右边距：自动（速记边距：0自动）。这样，您将使父元素居中，因此子元素也随之居中

您可能需要使用
margin:0取而代之。
这是两件不同的事情。100vw将使用100%的视口宽度，而100%将使用100%的父视图宽度。您已将父视图的宽度设置为800px，将左右边距设置为自动，这显然会将父视图与其父视图（本例中为主体）的中心对齐。将子元素的宽度设为100%将填充父元素的宽度。子元素的div不应超过父元素的div。如果将子元素的绝对值相对于整个页面宽度元素（如body）进行定位，则可以这样做。这是两种不同的情况。100vw将使用100%的视口宽度，而100%将使用100%的父视图宽度。您已将父视图的宽度设置为800px，将左右边距设置为自动，这显然会将父视图与其父视图（本例中为主体）的中心对齐。将子元素的宽度设置为100%将填充父元素的宽度。子元素的div不应超过父元素的div。如果将子元素的绝对值相对于完整页面宽度元素（如body）进行定位，则可能更容易在父链接上引入包装器，并将父元素本身设置为100%。谢谢你的回答，谢谢！是的，我同意。添加包装器使我的解决方案有点多余。在父链接上引入包装器可能更容易，并使父链接本身100%。谢谢你的回答，谢谢！是的，我同意。添加包装使我的解决方案有点多余。哦，这就是他的意思。冷却液。任何使用此功能的人都要知道，这将导致
.parent
的高度崩溃，并且在1E8中无法工作（就像任何人关心的那样）；）@WizardCoder你是对的，如果有内容就不起作用below@Runnick你能发布整个页面的完整代码和内容吗？这样我们就可以为你再来一次狂欢了？哦，这就是他的意思。冷却液。任何使用此功能的人都要知道，这将导致
.parent
的高度崩溃，并且在1E8中无法工作（就像任何人关心的那样）；）@WizardCoder你是对的，如果有内容就不起作用below@Runnick你能发布整个页面的完整代码和内容吗？这样我们就可以为你再来一次狂欢了？
.child {
  position: absolute;
  margin-top: 20px;
  padding: 20px;
  width: 100vw;
  background: grey;
  left: 0;
  box-sizing: border-box;
}