本文详解如何使用 flexbox 实现真正可靠的粘性页底（sticky footer）——页脚始终位于视口底部或内容末尾，绝不覆盖主体内容，且兼容各种内容高度变化。
在构建联系页等单页应用时，一个常见却棘手的问题是：页脚被设为 position: fixed 后，会悬浮覆盖在表单、地图等关键内容之上，导致用户无法完整查看或操作。你当前的 CSS 中 footer { position: fixed; bottom: 0; } 正是症结所在——它脱离文档流，不参与布局计算，自然无法感知 .contact-in 的高度，更不会随内容增长而下移。
要解决这一问题，核心思路是放弃 fixed，转而采用 语义化、响应式、基于文档流的布局方案。现代最佳实践是使用 display: flex + flex-direction: column 在
上构建垂直弹性容器，并通过 flex: 1 让主内容区域自动撑满剩余空间，从而自然“推”页脚到底部。✅ 推荐方案：Flexbox 布局驱动的粘性页脚
首先，重置并规范根级高度与盒模型（将以下代码置于 CSS 文件最顶部）：
/* 必须优先声明：确保 html 占满视口高度 */
html {
box-sizing: border-box;
height: 100%;
}
*, *::before, *::after {
box-sizing: inherit;
}
/* body 作为弹性容器，垂直排列子元素 */
body {
min-height: 100vh; /* 推荐用 vh 替代 %，避免嵌套高度计算误差 */
margin: 0;
display: flex;
flex-direction: column;
}接着，为页面结构添加语义化容器（推荐在 HTML 中包裹主要内容）：
立即学习“前端免费学习笔记（深入）”；
<!-- 修改你的 HTML 结构：将 header、main、footer 显式分离 -->
<body>
<header>...</header>
<!-- ✨ 关键：用 <main> 包裹全部可滚动内容 -->
<main class="contact-in">
<div class="contact-map">...</div>
<div class="contact-form">...</div>
</main>
<footer>...</footer>
</body>然后，在 CSS 中赋予弹性权重：
/* header 和 footer 不伸缩，保持自身高度 */
header,
footer {
flex: 0 0 auto; /* flex-grow: 0, flex-shrink: 0, flex-basis: auto */
}
/* main 占据所有剩余空间 —— 这是“粘性”的核心机制 */
main {
flex: 1 0 auto; /* flex-grow: 1 → 撑满空隙；flex-shrink: 0 → 内容超长时不压缩 */
width: 100%; /* 防止 flex 引起的宽度异常 */
}? 为什么有效？ 当页面内容较少时，main 的 flex: 1 会主动拉伸，填满 剩余高度，从而把 “推”到视口最底部；当内容超出一屏（如长表单+大地图），main 自动按需增高，footer 则自然跟随至内容末尾——完全符合“不遮挡、可滚动、自适应”的设计目标。
⚠️ 注意事项与常见陷阱
- 避免混用 fixed 与弹性布局：已移除 footer { position: fixed }，否则会破坏 flex 流程。若需页脚始终可见（如工具栏），应另作设计，而非此处的“粘性页脚”。
- 清除旧有干扰样式：你原 CSS 中 body { height: 150vh; } 和多处 margin-top: auto 0 属于无效/错误写法，必须删除。height: 150vh 会强制页面过长，导致无意义滚动。
- 移动端适配增强：在媒体查询中，可针对小屏幕微调 main 内边距或字体大小，但无需改动 flex 结构本身——Flexbox 天然响应式。
-
无障碍与 SEO 友好：使用
✅ 最终效果验证
- ✅ 页面内容短时：页脚紧贴视口底部（非浏览器窗口底部，而是页面可视区底边）；
- ✅ 页面内容长时：页脚位于所有内容之后，需滚动到底部才能看到；
- ✅ 表单与地图完全可见，无遮挡；
- ✅ 所有设备尺寸下表现一致。
这套方案简洁、标准、无 hack，已被现代浏览器广泛支持（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+），是目前实现粘性页脚最健壮、最推荐的方式。
