最可靠方案是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 就好了。

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