Css 为什么我的页面在使用百分比或视口调整大小时可以滚动？

我有一个问题，我的浏览器/页面在不应该滚动的时候变成可滚动的，我真的很想知道为什么，为了正确地修复它（而不是修补它）

我有一个页面包装器，可以覆盖整个页面和内部的各种div。现在，如果我将包装设置为height=100vh和widht=100vw，页面将变得垂直和水平滚动，这没有意义，因为视口的点将调整为可视空间？！请参见片段1

即使我将包装设置为100%的高度和宽度，页面仍然可以水平滚动。请参阅代码片段2

我知道这些问题可以通过溢出隐藏来修补，但我对了解原因感兴趣（还因为溢出隐藏会给我的内容带来问题，所以它不是真正的解决方案）

我将非常感谢任何帮助

片段1

*{
保证金：0；
填充：0；
边界：0；
}
#包装纸{
边框：1px纯红；
宽度：100vw；
高度：100vh；
}
#星空{
边框：1px纯蓝色；
}
#主要{
边框：1px纯绿色；
}
#起动门{
边框：1px纯黄色；
}

---

第二个示例中的问题是您有一个内部宽度，而不是完整的宽度

这意味着您有内容宽度，然后是填充宽度，然后用边框宽度设置元素的实际宽度。但是，当您在CSS中设置

宽度时，这只是设置内容+填充的大小，而忽略了计算中的边框大小


因此，对于示例2中的包装器：
宽度=100%，然后添加边框、零填充和零边距。因此，当边界不为
none
时，您将始终具有溢出

如何修复？
显然，您可以通过删除所有边界来解决此问题<代码>-p

对此，本机和更典型的解决方案是使用

框大小：

CSS规则并设置：

 box-sizing: border-box;

因此：

将修复您的示例2

您可以通过深入查看这篇isse的精彩演讲（从上面的图片中）

您可以阅读，以获取有关此CSS规则用法的一些有用说明

---

另请阅读。

第二个示例中的问题是，您有一个内部宽度，而不是完整的宽度

这意味着您有内容宽度，然后是填充宽度，然后用边框宽度设置元素的实际宽度。但是，当您在CSS中设置

宽度时，这只是设置内容+填充的大小，而忽略了计算中的边框大小


因此，对于示例2中的包装器：
宽度=100%，然后添加边框、零填充和零边距。因此，当边界不为
none
时，您将始终具有溢出

如何修复？
显然，您可以通过删除所有边界来解决此问题<代码>-p

对此，本机和更典型的解决方案是使用

框大小：

CSS规则并设置：

 box-sizing: border-box;

因此：

将修复您的示例2

您可以通过深入查看这篇isse的精彩演讲（从上面的图片中）

您可以阅读，以获取有关此CSS规则用法的一些有用说明

---

还请阅读。

非常感谢你，马丁！我不知道边界框的概念！实际上，我认为这是宽度=100%的默认值。谢谢你把这件事弄清楚！哦，顺便说一句，我已经做了更多的平行研究，它不适用于viewport的原因是viewport 100总是包含滚动条！我对viewport有太多的问题，现在就放弃它。非常感谢Martin！我不知道边界框的概念！实际上，我认为这是宽度=100%的默认值。谢谢你把这件事弄清楚！哦，顺便说一句，我已经做了更多的平行研究，它不适用于viewport的原因是viewport 100总是包含滚动条！我对viewport有太多的问题，现在就放弃它。