使用百分比或视口单位设置页面尺寸时为何出现滚动条？

嘿，这个问题我之前踩过好几次坑！其实100vh和100vw看起来是完美占满视口，但浏览器的默认样式、盒模型逻辑，甚至滚动条本身都会偷偷搞出滚动条，咱们一步步拆解根源，彻底解决：

1. 浏览器默认的body/html边距在搞鬼 #

浏览器默认给body加了8px左右的margin，给html也可能有默认padding。你的wrapper设了100vh/100vw，但body的margin会把wrapper往四个方向挤，超出视口自然就出现滚动条了。

修复： 先重置全局默认样式，把多余的边距清掉：

html, body {
  margin: 0;
  padding: 0;
}

2. 盒模型默认计算方式（content-box）导致溢出 #

默认情况下，CSS的width/height只计算元素的内容区尺寸。如果你的wrapper加了border或者padding，那总尺寸就会变成 100vw + border宽度 + padding宽度，直接超出视口范围。

修复： 切换到border-box盒模型，让width/height自动包含border和padding：

/* 全局设置更省心，所有元素都用这个规则 */
* {
  box-sizing: border-box;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  /* 现在加border/padding也不会溢出了 */
  border: 3px solid #222;
  padding: 15px;
}

3. 垂直滚动条吃掉了水平空间（vw的致命坑） #

当页面出现垂直滚动条时，浏览器会从视口中占用15-20px的水平空间，但100vw是包含滚动条在内的整个视口宽度——也就是说，wrapper的实际宽度会比可视区域宽出滚动条的宽度，直接触发水平滚动条。

修复： 用width: 100%代替width: 100vw，因为100%是相对于父元素（body/html）的宽度，而body/html会自动减去滚动条的宽度，完美适配可视区域。

4. 子元素的外边距折叠或溢出 #

如果wrapper内部的div有margin-top/margin-bottom，可能会触发外边距折叠——子元素的margin会“穿透”wrapper，导致wrapper的实际高度被撑开超过100vh；或者子元素本身尺寸超过wrapper，也会溢出。

修复：

• 给wrapper加overflow: hidden（如果子元素不需要滚动的话）；
• 或者给wrapper加padding-top: 1px/border-top: 1px solid transparent，打断外边距折叠；
• 检查子元素的尺寸，确保它们不会超出wrapper的范围。

/* 重置全局默认样式 */
html, body {
  margin: 0;
  padding: 0;
}

/* 全局盒模型统一 */
* {
  box-sizing: border-box;
}

.wrapper {
  width: 100%; /* 避开vw的滚动条坑 */
  height: 100vh;
  background-color: #f5f5f5;
  /* 随便加border/padding都不会溢出 */
  border: 2px solid #444;
  padding: 20px;
  /* 防止子元素溢出导致滚动 */
  overflow: hidden;
}

内容的提问来源于stack exchange，提问作者AlphaX