自定义Footer遮挡页面内容与导航栏问题求修复方案

问题根因排查 #

1. 页脚CSS设置错误：.footer-bottom 配置了 bottom: 50%，相对定位下该属性会让页脚向上偏移自身高度的50%，直接覆盖上方内容，偏移量过大时甚至会遮挡顶部fixed定位的导航栏
2. 原有布局没有做高度自适应约束，body预留的底部边距远小于页脚实际渲染高度，内容较少时布局完全错乱

修复步骤 #

1. 修正页脚错误样式 #

替换原有.footer-bottom的CSS代码，删除无效的偏移配置：

.footer-bottom {
  text-align: center;
  background-color: #1e77b0;
  width: 100%;
}

2. （可选）配置粘性页脚效果 #

如果需要实现页面内容不足时页脚贴在视口底部，内容足够时跟在内容末尾的效果，修改两处CSS即可：

• 修改body样式：

body {
  min-height: 100vh; /* 占满整个视口高度 */
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #eff2f7;
}

• 给内容容器添加自动撑高属性：

.content-wrapper {
  margin-top: 50px;
  padding: 30px;
  flex: 1; /* 新增：自动占满主轴剩余空间，把页脚挤到最底部 */
}

3. 清理无效代码 #

原代码中a标签的left: -50没有单位也未开启定位，属于无效代码，直接删除即可避免后续潜在问题。

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