Javascript 非全屏宽度父元素的子元素的全屏宽度

此问题的基础是，为了将全屏宽度应用于非全屏父元素的子元素，在子元素上使用以下规则：

width: 100vw;
margin-left: calc(-50vw + 50%);

如中所示，此解决方案在存在垂直滚动条的情况下不起作用，但是：

100vw

没有考虑滚动条，因此子元素最终比屏幕宽（注意：没有滚动条的情况下工作非常好）

有没有一种方法可以解决这个问题，使子元素精确地占据整个屏幕的宽度？如果不是纯CSS，那么使用JS

注意：在我的情况下，

body

上的

溢出

规则是不可接受的，因为我需要孩子填充屏幕的确切宽度。

在这里，您将遇到的一个问题是，我认为滚动条宽度不是通用的，因此您可能需要实现一些条件逻辑来影响基于此的宽度/边距

尽管如此，你可能会发现这很有用。下面的函数将通过比较文档的高度和窗口的高度来检查文档是否有垂直滚动条。基于所述滚动条的存在，它将修改子窗口的宽度和边距以适应窗口

再次，它可能需要调整，虽然它应该提供一个体面的基础。

功能调整宽度（）{
如果（$（文档）.height（）>$（窗口）.height（））{
$（“.child”）.css({
“宽度”：“计算（100vw-18px）”，
“左边距”：“计算（-50vw+50%+9px）”
});
}否则{
$（“.child”）.css({
“宽度”：“，
“左边距”：”
})
}
}
$（窗口）.resize（调整宽度）.trigger（“resize”）
.parent{
宽度：500px；
高度：500px；
保证金：0自动；
边框：3倍纯绿；
}
.孩子{
高度：100px；
背景：红色；
宽度：100vw；
左边距：计算（-50vw+50%）；
}

内容
简单。由于父对象没有以任何方式定位，因此可以绝对定位子对象。不要弄乱
calc
或其他，这在任何地方都有效

.child {
  height: 100px;
  background: red;
  position:absolute;
  left:0;
  right:0;
}

这是一把小提琴：
我找到了解决方案，它是由盖伊提供的，但我不知道最初是谁做的。我还没有完全测试它，所以它可能无法在所有浏览器中工作。我知道IE8不支持大众的
vw
单元，好像有人在乎


正文{
保证金：0；
}
.包装纸{
宽度：100%；
最大宽度：400px；
保证金：0自动；
背景：粉红色；
/*边距用于在堆栈溢出全屏代码段视图上显示*/
边缘顶部：80px；
}
.全宽{
宽度：100vw；
左边距：-50vw；
左：50%；
背景：红色；
位置：相对位置；
颜色：白色；
}

你好我是一个段落。
你没有段落，混蛋

安静点，你们这些软弱的失败者。
是的，我只是想滚动条的宽度在浏览器中不是通用的，所以如果没有某种条件逻辑将宽度调整到每个滚动条的大小，似乎就无法实现这一点。有趣的是，没有一个更明显的解决方案？这是不幸的，尽管我知道没有一个纯CSS解决方案，坦率地说，我并不为我提供的解决方案感到骄傲。这看起来有点僵硬，尽管做了最好的清理工作，但似乎没有一种优雅的方法来补偿滚动条——至少，我不知道。但是祝你好运！！下面是一个jQuery方法-