为何添加border-bottom属性会使页面出现垂直滚动条？

我使用calc函数将header、footer和content适配在同一屏幕内，但为footer添加border-bottom属性后，页面出现了垂直滚动条。这种情况是否属于正常现象？

代码示例 #

CSS

* {
  margin: 0;
}

.header {
  height: 100px;
  width: 100%;
  background-color: pink;
  text-align: center;
}

.content {
  height: calc(100vh - 200px);
  width: 100%;
  background-color: red;
  text-align: center;
}

.footer {
  height: 100px;
  width: 100%;
  background-color: orange;
  text-align: center;
  border-bottom: 1px solid black;
}

HTML

<div class="header">
  header
</div>

<div class="content">
  content
</div>

<div class="footer">
  footer
</div>

这是正常现象，根源在于CSS默认的content-box盒模型：

• 默认情况下，元素设置的height仅代表内容区域的高度，border和padding会额外增加元素的总占用高度。
• 你的footer设置了height:100px，加上border-bottom:1px后，footer的实际总高度变成了101px；header高度是100px，两者总高度为201px。
• 而content的高度是calc(100vh - 200px)，整个页面的总高度就变成了100px + (100vh - 200px) + 101px = 100vh + 1px，超过了视口高度，因此出现垂直滚动条。

解决方法 #

推荐使用以下两种方式修复：

1. 修改盒模型（更灵活）
   给footer添加box-sizing: border-box，让border包含在设置的height范围内，不会额外占用高度：

.footer {
  height: 100px;
  width: 100%;
  background-color: orange;
  text-align: center;
  border-bottom: 1px solid black;
  box-sizing: border-box; /* 添加这行 */
}

这种方法的优势是后续调整border宽度时，不需要修改calc的计算值。

2. 调整calc计算值
   把content的高度计算改成calc(100vh - 201px)，把border的1px也纳入扣除范围：

.content {
  height: calc(100vh - 201px);
  /* 其他样式不变 */
}

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