最可靠方案是display: flex + flex-direction: column，需确保body设min-height: 100vh、margin: 0，main设flex: 1，footer设flex-shrink: 0且为直接子元素，margin-top: auto生效。
用 display: flex + flex-direction: column 是目前最可靠、兼容性好且无需 JS 的方案。其他方法（如 position: absolute）容易遮内容或留白，margin-bottom: auto 在非 flex 子元素上根本无效。
body 必须设为 flex 容器并撑满视口
关键不是 footer 自己“定位”，而是让 body 成为垂直布局容器，并有明确高度基准：
-
body要加display: flex和flex-direction: column -
body必须设min-height: 100vh（不是height: 100%，后者在嵌套中易失效） -
body的margin: 0要显式清除，否则浏览器默认 margin 会干扰布局 - 如果用了外层
div#wrapper，那flex和min-height得加在它身上，且它必须是body的直接子元素
main 内容区必须占满剩余空间
页脚能“被推到底部”，靠的是中间内容区域主动撑开空间：
- 把主要内容包裹在
main或语义化section中（比如#company-section） - 该元素必须设
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），不能只写flex-grow: 1 - 避免给这个区域设固定
height或max-height，否则会破坏自适应逻辑 - 如果内容区里还有 flex 布局，注意
align-items/justify-content可能影响内部垂直居中，但不影响页脚定位
footer 必须与 main 同级且防压缩
DOM 结构和样式稍有错位，整个布局就失效：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
footer必须是body（或你设了 flex 的 wrapper）的**直接子元素**，不能包在main或section里 -
footer要加flex-shrink: 0，否则长页面滚动时可能被压缩（尤其含图片或 padding 时） - 如果
header也存在，同样要加flex-shrink: 0，并建议设明确height或min-height -
margin-top: auto是让 footer “粘底”的关键声明，但它只对 flex 子元素生效 —— 所以结构和容器缺一不可
常见失效原因和调试点
90% 的“页脚没贴底”问题都出在这几个地方：
- 检查
body是否真有min-height: 100vh：用浏览器开发者工具看 computed styles，别只信 CSS 文件顺序 - 确认
footer没被任何display: inline-flex或float父容器包裹 —— 这会导致它脱离 flex 上下文 -
box-sizing: border-box要全局启用，否则padding或border会让 footer 实际高度超预期，撑出滚动条 - IE11 对
flex: 1支持不稳定，若需兼容，可改用flex: 1 0 0并测试
真正难的不是写几行 CSS，而是确保 HTML 结构干净、层级扁平、无隐式定位干扰 —— 很多时候删掉一个多余的 div 就好了。
