CSS calc计算主体内容高度异常：为何需减15.5rem而非13rem？

你遇到的这种计算偏差，大概率是浏览器默认样式、元素额外的边距/内边距/边框导致的，以下是具体分析和解决办法：

可能的原因 #

• 浏览器默认样式的影响：
  浏览器会给body、header、footer这类元素设置默认的margin或padding（比如body默认有8px左右的margin）。这些默认间距不会被你写的height属性包含，会额外占用垂直空间，导致总高度超出100vh。
• 元素的margin/padding未被计入计算：
  如果你给header加了底部margin，或者给footer加了顶部margin，这些间距会叠加在它们的高度之上。比如header底部有1rem margin，footer顶部有1rem margin，再加上body的0.5rem默认margin，总额外高度就是2.5rem，刚好对应你需要多减去的15.5-13=2.5rem。
• box-sizing未设置为border-box：
  默认情况下box-sizing: content-box，元素的height仅计算内容区域，padding和border会额外增加元素的实际占用高度。比如header设置了padding-top: 0.5rem; padding-bottom: 0.5rem，那它实际占据的高度就是8rem+0.5rem+0.5rem=9rem，而非你设置的8rem。

解决步骤 #

1. 全局重置样式，消除默认干扰：
   先给所有元素统一设置box-sizing，并清除默认的margin和padding：

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   

2. 检查并清理额外的间距属性：
   查看header、footer、body-content的CSS，确认没有多余的margin、padding或border。
3. 使用正确的calc公式：
   完成上述两步后，再用最初的公式就能正常生效：

   .body-content {
     height: calc(100vh - 8rem - 5rem);
   }
   

内容的提问来源于stack exchange，提问作者D. Rattansingh