技术问询：如何让页面Footer固定在底部且不遮挡内容

问题根源 #

position: fixed 的元素会脱离正常文档流，不占据页面空间，所以会直接覆盖下方的表单、地图等内容。你需要的是粘性底部效果——当页面内容高度小于视口时，footer贴在视口底部；当内容超过视口时，footer跟随内容到页面最底部，滚动到末尾才显示，而非固定在视口的fixed定位。

方案一：Flexbox布局（推荐，兼容性好） #

这是目前最简单可靠的实现方式，利用flex布局的特性就能轻松搞定：

调整HTML结构（确保层级清晰） #

<body>
  <!-- 页面主内容容器 -->
  <div class="page-content">
    <!-- 你的联系表单、地图等内容都放在这里 -->
    <form class="contact-form">...</form>
    <div class="map">...</div>
  </div>
  <!-- Footer容器 -->
  <footer class="site-footer">...</footer>
</body>

对应的CSS样式 #

/* 先重置默认边距，避免浏览器默认样式干扰布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 将body设置为flex容器，垂直排列子元素 */
body {
  min-height: 100vh; /* 确保body至少占满整个视口高度 */
  display: flex;
  flex-direction: column;
}

/* 让主内容容器自动填充body的剩余空间 */
.page-content {
  flex: 1; /* 占据除footer外的所有剩余高度 */
  padding-bottom: 20px; /* 可选：给内容底部加padding，避免和footer贴得太近 */
}

/* Footer样式，直接去掉fixed定位 */
.site-footer {
  background-color: #333;
  color: #fff;
  padding: 15px 0;
  /* 移除 position: fixed; 相关属性 */
}

方案二：calc计算margin（兼容旧浏览器） #

如果需要兼容不支持flex的旧浏览器，可以用这个方法：

HTML结构 #

和方案一保持一致，主内容容器+footer的层级。

CSS样式 #

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

/* 确保根元素和body占满视口高度 */
html, body {
  height: 100%;
}

/* 主内容容器设置最小高度，并通过负margin把footer拉上来 */
.page-content {
  min-height: 100%;
  /* margin-bottom的绝对值要等于footer的高度 */
  margin-bottom: -80px; /* 假设你的footer高度是80px */
  padding-bottom: 80px; /* 和margin-bottom绝对值相同，防止内容被footer遮挡 */
}

/* 固定footer的高度 */
.site-footer {
  height: 80px;
  background-color: #333;
  color: #fff;
  padding: 15px 0;
}

关键注意事项 #

• 必须移除footer的position: fixed，这是导致遮挡的核心原因——fixed定位会让footer悬浮在页面上方，不参与文档流布局。
• 如果你的页面有额外的外层容器（比如.wrapper），需要把flex布局或者高度设置应用到这个最外层容器上，而不是直接给body设置。
• 方案二中要确保footer的高度是固定值，这样margin-bottom和padding-bottom的数值才能匹配。

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