使用calc(100vh-120px)设min-height，内容超100vh后失效问题求助

问题根源 #

使用position: fixed的页脚会脱离文档流，你给#wrapper设置的min-height: calc(100vh - 120px)只能保证内容不足一屏时容器填满页脚上方空间，但当内容高度超过一屏时，容器会随内容自动延伸，这时候页脚会直接覆盖容器底部的内容，而非容器自动留出页脚的占位空间。

修复方案 #

给#wrapper添加与页脚高度一致的padding-bottom: 120px，同时保留原有的min-height设置。这样：

• 内容不足一屏时，min-height确保容器占满页脚上方区域，padding-bottom不会产生多余空白；
• 内容超过一屏时，padding-bottom会在容器底部预留出页脚高度的空间，彻底避免内容被页脚遮挡。

另外一定要加上box-sizing: border-box，它能让padding被包含在min-height的计算范围内，不会额外增加容器的总高度。

完整代码示例 #

#wrapper {
  min-height: calc(100vh - 120px);
  padding-bottom: 120px; /* 数值与页脚高度完全匹配 */
  box-sizing: border-box; /* 核心：padding不额外增加容器高度 */
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  /* 可添加背景色、文字样式等自定义内容 */
}

进阶优化 #

如果页脚高度需要动态调整，建议用CSS变量统一管理，减少后续维护成本：

:root {
  --footer-height: 120px;
}

#wrapper {
  min-height: calc(100vh - var(--footer-height));
  padding-bottom: var(--footer-height);
  box-sizing: border-box;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--footer-height);
}

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