使整个窗口周围出现边框会导致垂直滚动条显示吗？

12 浏览
0 Comments

使整个窗口周围出现边框会导致垂直滚动条显示吗？

通过我的搜索，我发现以下代码应该使浏览器窗口周围出现边框。

几乎...

即使内没有任何内容，垂直滚动条也会显示：

html {
    height: 100%;
}
body {
    min-height: 100%;
    margin: 0px;
    border: solid darkgreen;
}

我迫切需要一个救援队。

0

1 答案

0 Comments

问题的出现原因：在给整个窗口添加边框后，垂直滚动条出现的原因是没有考虑到边框的宽度。由于边框的宽度没有被计算在窗口的高度内，所以窗口的实际高度超过了可视区域的高度，从而出现了垂直滚动条。

解决方法：只需要在body的CSS样式中添加box-sizing: border-box;，即可解决该问题。这样一来，box-sizing属性的值会将边框的宽度计算在窗口的高度内，确保窗口的实际高度与可视区域的高度一致，从而避免了垂直滚动条的出现。

完整代码如下：

html {
    height: 100%;
}
body {
    min-height: 100%;    
    margin: 0px;    
    border: solid darkgreen;
    box-sizing: border-box; // add this line
}

想要了解更多关于box-sizing属性的信息，请参考MDN。

对于是否与margin collapse有关的问题，答案是否定的。如果你想了解更多关于margin collapse的知识，请访问这里。

0