要求

1. 必须填充100%的视口，尽管有侧页。
2. 的侧边标记预先未知（假设该组件是一个可重用组件，不知道它所使用的环境）
3. 滚动条宽度依赖于broswer，因此它的宽度事先未知，无法硬编码。
4. 长度必须完全可见。

解决方案尝试

对象的左右边框不可见。 我想原因是滚动条。

我们能尊重滚动条吗？

---

顺晟科技：

这可能不能满足父级具有侧边“填充”的要求。我在这个答案中对此进行了松散的解释。

如果你不需要使用“大众”单位，你就不需要担心滚动条的宽度。就我个人而言，我认为“100VW”和“100VH”现在是代码的味道，因为滚动条和手机浏览器Chrome存在所有潜在的问题。

此解决方案可能有帮助，我在中添加“显示：块”。子,添加宽度：自动和删除边距左。

仅用CSS不能完全解决这个问题。您可以将其居中并使其成为视口宽度，但如果没有JS，则无法确定操作系统，因为滚动条相对于操作系统和浏览器而变化。

以下是在每个浏览器中测试的滚动条大小:

• OSX（Chrome,Safari,Firefox）-15px
• Windows XP(IE7、Chrome、Firefox)-17px
• Windows 7(IE10、IE11、Chrome、Firefox)-17px
• Windows 8.1(IE11、Chrome、Firefox)-17px
• Windows 10(IE11、Chrome、Firefox)-17px
• Windows 10（Edge 12/13)-12px

所以可能的解决方案是:

1. 将子元素的宽度设置为(100vw-scrollbar width）
2. 将此元素居中。
3. 检测OS并将相关类添加到body元素
4. 默认情况下像windows操作系统一样计算子元素的宽度
5. 在Mac和Edge浏览器中更改

我认为可以通过以下方式实现

.Child