推荐用flex布局实现页脚沉底：html和body设min-height: 100vh并重置内外边距，外层包裹div加display: flex、flex-direction: column和min-height: 100vh，header和footer设flex-shrink: 0，主内容区用flex: 1或margin-top: auto。
直接用 display: flex + flex-direction: column 就能实现，但必须处理好高度继承链和 flex 项行为，否则 footer 会塌陷到中间、内容不滚动、或在 iOS 上被软键盘顶飞。
html 和 body 必须重置并设 min-height: 100vh
浏览器默认 body 高度由内容撑开，不是视口高度。如果只写 height: 100%，而父级没高度，最终所有子元素高度都算作 0px。
-
html, body { margin: 0; padding: 0; min-height: 100vh; }—— 用min-height而非height，避免内容超长时被截断 - 不要直接在
body上写display: flex：旧版 Safari 对body的 flex 支持不稳定，第三方脚本也可能覆盖它 - 推荐包一层
<div class="app">，把 <code>display: flex、flex-direction: column、min-height: 100vh全加在这层上header 和 footer 必须是 flex 容器的直接子元素，且禁用
flex-shrink: 0很多人给 header/footer 加
height后发现内容区不伸展，问题常出在它们被意外压缩（尤其当内容少时）。-
.header, .footer { flex-shrink: 0; }是必须的，否则 flex 容器可能为填满空间而压缩它们 - 避免同时设
height: 100%或flex: 1—— 这会与 column 布局逻辑冲突 - 如果 header 高度动态（比如多行文字），别硬编码
height，改用padding+line-height或让其自然包裹
中间内容区用
flex: 1还是margin-top: auto？二者都能把 footer “推”到底部，但适用场景不同：
立即学习“前端免费学习笔记（深入）”；
-
flex: 1：让内容区主动拉伸填满剩余空间，适合需要严格占满高度的场景（如聊天窗口、全屏表单），但若内容区自身也是display: flex容器，嵌套 flex 可能触发旧版 Chrome/Safari 渲染异常 -
margin-top: auto：利用 flex 的 auto margin 吸附特性，更轻量、兼容性更好，对嵌套 flex 更友好；但它不强制拉伸，仅靠“吸附”生效，要求 header 和 footer 是直接子元素 - 两者都依赖父容器有明确高度参考（即前面的
min-height: 100vh），缺了这个，flex: 1和margin-top: auto都无效
移动端软键盘弹出后 footer 被顶出视口？
这是纯 CSS 无解的问题：
min-height: 100vh在地址栏缩放、软键盘弹出、图片懒加载完成时不会自动重算，视口高度已变，但布局未响应。- 监听
resize或focusin/blur事件，必要时用 JS 强制重排（例如 toggle 一个空 class） - 避免给 footer 设
position: fixed—— 它会脱离文档流，导致屏幕阅读器跳过、滚动时内容从 header 下穿过、软键盘弹出时错位 - 真正的“吸底”是文档流内的视觉效果，不是定位钉死；footer 必须是 flex 容器最后一个子元素，且不能有干扰 margin/padding/flex 属性
最容易被忽略的是高度继承链断裂和 flex 项的
flex-shrink行为——很多问题表面是“footer 没到底”，根因其实是html没撑高，或header被压缩了。先检查这两点，比调样式快得多。 -
