Javascript 在相对位置有限的div内是否可能有100%的屏幕宽度？

我想知道是否有可能将一个div拉伸到

100vw

，而在一个

相对

父div中，宽度有限。在这个过程中，也不会像将“位置”设置为“绝对”时那样丢失文档内部的高度

纯css有可能吗？或者我需要一些jQuery/JS吗

正文{
背景：#f0；
文本对齐：居中；
}
.家长{
最大宽度：300px；
高度：300px；
保证金：自动；
位置：相对位置；
背景：白色；
}
p{
填充：20px；
}
#横幅{
填充：20px；
背景：黑色；
颜色：白色；
}

我的相对父容器，
具有固定宽度

我的全幅横幅

是的，您可以使用100vw宽度。要更正位置，您可以添加

左边距：calc（-50vw+50%），将其向左移动屏幕宽度的一半，然后再向右移动其自身宽度的50%，从而再次“居中”，在这种情况下会产生全宽元素：


正文{
背景：#f0；
文本对齐：居中；
}
.家长{
最大宽度：300px；
高度：300px；
保证金：自动；
位置：相对位置；
背景：白色；
}
p{
填充：20px；
}
#横幅{
填充：20px；
背景：黑色；
颜色：白色；
宽度：100vw；
左边距：计算（-50vw+50%）；
}

我的相对父容器，
具有固定宽度

我的全幅横幅

我使用
相对
和
边距
和
左
右
来实现这一点


正文{
背景：#f0；
文本对齐：居中；
溢出：隐藏；
}
.家长{
最大宽度：300px；
高度：300px；
保证金：自动；
位置：相对位置；
背景：白色；
}
p{
填充：20px；
}
#横幅{
填充：20px；
背景：黑色；
颜色：白色；
宽度：100vw；
位置：相对位置；
左：50%；
右：50%；
左边距：-50vw；
保证金权利：-50vw；
}

我的相对父容器，
具有固定宽度

我的全幅横幅

aahh。。。如此优雅而简单的解决方案。非常感谢@Johannes！：）水平滚动条太糟糕了。我读了你的帖子，很有趣！我想我将只添加ad
body{overflow-x:hidden}
直到找到更好的解决方案。添加此代码笔作为附加引用：。If提供了一个使用JavaScript的解决方案。@TVBZ这是一个非常酷的补丁，谢谢分享！虽然我真的很想为这个问题找到一个只使用CSS的解决方案（但这可能是不可能的），但这是解决这个问题的一个很好的方法。但就目前而言，这必须做到：）这也是一种有趣而优雅的方法。它的结果与约翰尼斯的例子相同。通过设置
overflow-x:hidden
，可以隐藏水平滚动条？或者你还有其他建议吗？@TVBZ是的，我同意，因为
body
和
HTML
不需要滚动