当使用百分比或视图进行调整时，为什么我的页面可以滚动？
当使用百分比或视图进行调整时，为什么我的页面可以滚动？
提问于 2018-02-14 20:21:40
我有一个问题，就是我的浏览器/页面在不应该滚动的时候就可以滚动，我真的很想了解原因，以便正确地修复它(而不是修补它)。
我有一个页面包装器，扩展到整个页面和内部的各种div。现在，如果我将包装设置为height=100vh和widht=100vw，页面将垂直和水平滚动，这是没有意义的，因为视图的重点是调整到可查看的空间？！见片段1
即使我将包装设置为100%的高度和宽度，页面仍然可以水平滚动。见片段2
我知道这样的问题可以用溢出隐藏来修补，但我有兴趣了解原因(也是因为溢出隐藏会给我的内容带来问题，所以它并不是真正的解决方案)。
我将非常感谢任何帮助！！
片段1
* {
Margin: 0;
Padding: 0;
Border: 0;
}
#wrapper {
border: 1px solid red;
width: 100vw;
height: 100vh;
}
#startheader {
border: 1px solid blue;
}
#main {
border: 1px solid green;
}
#startfooter {
border: 1px solid yellow;
}<body>
<div id="wrapper">
<header>
<div id="startheader"></div>
</header>
<div id="main"></div>
<div id="startfooter"></div>
</div>
片段2
* {
Margin: 0;
Padding: 0;
Border: 0;
}
#wrapper {
border: 1px solid red;
width: 100%;
height: 100%;
}
#startheader {
border: 1px solid blue;
}
#main {
border: 1px solid green;
}
#startfooter {
border: 1px solid yellow;
}<body>
<div id="wrapper">
<header>
<div id="startheader"></div>
</header>
<div id="main"></div>
<div id="startfooter"></div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-14 20:30:19
第二个示例中的问题是，您具有内部宽度，而不是完全宽度。
这意味着您有内容宽度，然后是填充宽度，然后使用边框宽度设置元素的实际宽度。但是，当您在CSS中设置width时，这只是设置内容+填充的大小，并且在计算中忽略了边框大小。
因此，对于示例2上的包装器: width = 100%，然后添加边框，零填充和零边距。因此，在边框不是none的情况下，总是会有溢出。
怎么修？
显然，您可以通过删除所有边框来解决此问题！
;-p
这方面的本机解决方案和更典型的解决方案是使用box-sizing: CSS规则并设置：
box-sizing: border-box;所以：
* {
Margin: 0;
Padding: 0;
Border: 0;
box-sizing: border-box;
}将修复您的示例2。
您可以在深度在这个网站上 (从上面的图像被拍摄)中看到关于这个the的很好的讨论。
您可以阅读箱形尺寸，以获得有关此CSS规则使用情况的一些有用说明。
还读了保罗·爱尔兰对此的看法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48795561
复制相关文章
相似问题
腾讯云开发者
