如何修复？

Question

我遇到的问题是，我的浏览器/页面在不应该滚动时可以滚动，我真的想了解原因，以便正确修复它（而不是修补它）。

我有一个页面包装器，它遍及整个页面和各种div。现在，如果我将包装器设置为height = 100vh并且widht = 100vw，页面将变为垂直和水平滚动，这不是有意义的，因为视口点是要调整到可视空间？！请参阅Snippet 1

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

我知道这些问题可以通过隐藏溢出修补，但我对理解原因感兴趣（也因为隐藏溢出会导致我的内容出现问题，所以它不是真正的解决方案）。

我非常感谢任何帮助！

SNIPPET 1

＆＃13;

* {
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;
}

＆＃13;

<body>

<div id="wrapper">

<header>
<div id="startheader"></div>
</header>

<div id="main"></div>

<div id="startfooter"></div>

</div>

＆＃13;

SNIPPET 2

＆＃13;

* {
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;
}

＆＃13;

<body>

<div id="wrapper">

<header>
<div id="startheader"></div>
</header>

<div id="main"></div>

<div id="startfooter"></div>

</div>

＆＃13;

Answer 1

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

这意味着您具有内容宽度，然后是填充宽度，然后使用边框宽度设置元素的实际宽度。但是当您在CSS中设置width时，只是设置内容+填充的大小，并忽略其计算中的边框大小。

因此，对于示例二的包装器： width = 100％，然后添加边框，零填充和零边距。因此，如果边框不是none，则始终会溢出。

如何修复？

显然，您可以通过删除所有边框来解决此问题！ ;-p

另一种更典型的解决方案是使用box-sizing: CSS规则并设置：

 box-sizing: border-box;

所以：

* {
   Margin: 0;
   Padding: 0;
   Border: 0;
   box-sizing: border-box;
 }

将修复你的例子2.

你可以通过这个深度on this website查看一个很好的谈话（从上面的图片中可以看出）。

您可以阅读MDN guide to how to use box-sizing以获取有关此CSS规则用法的一些有用说明。

并阅读Paul Irish's views on this。

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

1 个答案:

如何修复？