本文详解如何使用现代 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;
}接着，为页面结构添加语义化容器（推荐使用
...
/* 固定头部与页脚高度，主内容自动填充剩余空间 */
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 生效的问题，需同步调整：
移除 body { height: 150vh }
这会强制页面高度为视口 1.5 倍，破坏 min-height: 100vh 的自然行为，导致滚动异常。取消 footer { position: fixed }
fixed 定位使页脚脱离文档流，必然覆盖内容。Flexbox 方案中页脚应为普通文档流元素。-
为
添加明确标签（而非仅用 div）
当前 HTML 中缺少，请将 .contact-in 包裹在 标签内（语义化 + 布局必需）： 适配移动端的 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，可直观验证其是否真正撑满剩余空间。
按照以上步骤调整后，您的联系页将实现理想效果：内容少时页脚沉底，内容多时页脚随内容自然下移，用户可顺畅滚动查看完整表单与地图——真正“粘性”，而非“覆盖”。
