为何div高度+边距总和为100%仍出现CSS垂直滚动条？

核心原因：外边距折叠（Margin Collapsing） #

你的.content元素设置了margin-top:30px，而父元素body没有设置border、padding或overflow:hidden来阻隔，导致子元素的顶部外边距与父元素的顶部外边距发生折叠——简单说就是.content的margin-top会“传递”给body，相当于body被加上了margin-top:30px。

而body本身设置了height:100vh，这就使得整个页面的总高度变成了100vh + 30px，超出了视口范围，因此出现垂直滚动条。

几种可行的解决方案 #

方案1：用内边距替代外边距（推荐）

给body添加上内边距，同时移除.content的margin-top，并将.content的高度改为100%：

html {
    margin: 0;
    padding: 0;
}

body {
  height: 100vh;
  margin: 0;
  padding: 30px 0 0 0; /* 添加上内边距 */
  background-color: purple;
}

.content {
  height: 100%; /* 高度改为100%，无需再计算 */
  background-color: blue;
  width: 300px;
}

方案2：给body设置overflow:hidden

通过overflow:hidden阻止外边距折叠，让.content的margin-top被包含在body内部：

html {
    margin: 0;
    padding: 0;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: purple;
  overflow: hidden; /* 添加该属性 */
}

.content {
  height: calc(100% - 30px);
  margin-top: 30px;
  background-color: blue;
  width: 300px;
}

方案3：给body添加透明边框

用边框打破外边距折叠的条件，不影响视觉效果：

html {
    margin: 0;
    padding: 0;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: purple;
  border-top: 1px solid transparent; /* 添加透明顶部边框 */
}

.content {
  height: calc(100% - 30px);
  margin-top: 30px;
  background-color: blue;
  width: 300px;
}

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