推荐用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 支持不稳定，第三方脚本也可能覆盖它
• 推荐包一层
  ，把 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 “推”到底部，但适用场景不同：

  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载

  • 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 被压缩了。先检查这两点，比调样式快得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！