本文详解如何使用现代 css flexbox 实现真正的“粘性页脚”（sticky footer）：页脚始终停靠在页面内容底部，当内容不足时撑满视口，内容充足时自动下移不遮挡主体，彻底解决 fixed 定位导致的覆盖问题。

在实际开发中，许多开发者误用 position: fixed 或 absolute 实现“底部页脚”，结果导致页脚悬浮覆盖表单、地图等关键内容（如您案例中的联系表单与 Google 地图），尤其在移动端或小屏设备上体验极差。真正符合语义与可访问性的解决方案，是采用 Flexbox 布局驱动的 Sticky Footer —— 它无需 JavaScript、兼容所有现代浏览器（包括 Safari 10.1+），且天然支持响应式与内容自适应。

✅ 正确实现原理

核心思想是将

设为垂直方向的 Flex 容器，并通过 flex: 1 让主内容区域（

）弹性撑开剩余空间，从而将页脚“推”至可视区域底部：

/* 必须置于 CSS 文件最顶部，确保继承链正确 */
html {
  box-sizing: border-box;
  height: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  min-height: 100vh; /* 推荐使用 vh 而非 %，更可靠 */
  display: flex;
  flex-direction: column;
}

接着，为页面结构添加语义化容器（推荐使用

、

、

）并分配 flex 属性：

<body>
  <header>...</header>
  <main>
    <!-- 您的联系表单与地图 -->
    <div class="contact-in">...</div>
  </main>
  <footer>...</footer>
</body>

/* 固定头部与页脚高度，主内容自动填充剩余空间 */
header,
footer {
  flex: 0 0 auto; /* 不伸缩、不收缩，仅按内容高度渲染 */
}

main {
  flex: 1 0 auto; /* 关键：占据所有可用垂直空间 */
}

? 注意：flex: 1 0 auto 等价于 flex: 1，但显式写出 flex-shrink: 0 可避免旧版 Safari 的兼容性问题；flex-basis: auto 确保主内容初始高度由子元素决定，而非被压缩。

⚠️ 针对您代码的关键修正点

您当前 CSS 中存在多个阻碍 Sticky Footer 生效的问题，需同步调整：

1. 移除 body { height: 150vh }
   这会强制页面高度为视口 1.5 倍，破坏 min-height: 100vh 的自然行为，导致滚动异常。

2. 取消 footer { position: fixed }
   fixed 定位使页脚脱离文档流，必然覆盖内容。Flexbox 方案中页脚应为普通文档流元素。

3. 为

   添加明确标签（而非仅用 div）
   
   当前 HTML 中缺少
   ，请将 .contact-in 包裹在

   标签内（语义化 + 布局必需）：

   <main>
     <div class="contact-in">
       <!-- 表单与地图 -->
     </div>
   </main>

4. 适配移动端的 footer 行为
   您已有 @media (max-width: 560px) { footer { position: relative; } }，这很好——但需配合 Flexbox 结构，此时 position: relative 已非必需，可直接删除，由 Flex 自动处理。

✅ 最终精简 CSS 片段（可直接集成）

/* 重置与基础布局 */
html {
  box-sizing: border-box;
  height: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
  background: #F6F6F6;
}

/* 结构容器 */
header { 
  flex: 0 0 auto; 
  /* 保留您原有的样式，如 background、padding 等 */
}

main { 
  flex: 1 0 auto; 
  /* 移除您原 body 中的 margin-top/auto 等干扰属性 */
}

footer { 
  flex: 0 0 auto; 
  /* 移除 position: fixed; bottom: 0; left: 0; */
  width: 100%;
  background: #111;
}

? 总结与最佳实践

• ✅ 优先使用 Flexbox 方案：语义清晰、代码简洁、无 JS 依赖、无障碍友好。
• ❌ 避免 position: fixed/absolute 用于页脚布局：除非明确需要悬浮效果（如聊天窗口），否则必然引发内容遮挡。
• ✅ 始终用 min-height: 100vh 替代 height: 100%：vh 单位基于视口，不受父级高度限制，更稳定。
• ✅ 善用 flex-shrink: 0：防止页脚在窄屏下被意外压缩。
• ? 调试技巧：在浏览器 DevTools 中临时给 main 添加 outline: 2px solid red，可直观验证其是否真正撑满剩余空间。

按照以上步骤调整后，您的联系页将实现理想效果：内容少时页脚沉底，内容多时页脚随内容自然下移，用户可顺畅滚动查看完整表单与地图——真正“粘性”，而非“覆盖”。