Flex布局实现底部固定Footer方法

Flex布局中footer无法固定在页面底部，根源往往不是Flex属性写错，而是高度链路断裂——从html、body到主容器再到内容区，任一环节缺少height: 100%或min-height: 100vh（推荐100%以规避移动端键盘导致的vh抖动），都会让flex: 1失去伸展空间；同时需确保主容器为flex column、内容区使用真正可伸缩的flex: 1（而非flex: 1 0 auto），并警惕margin干扰、元素溢出及IE11下flex-basis解析异常等“隐形陷阱”，真正贴底的关键，在于整条高度传递路径的严丝合缝。

Flex布局里footer总不贴底？检查父容器高度是否撑满视口

绝大多数情况不是flex写错了，而是外层容器没高度。浏览器默认不会让html或body占满整个视口，所以即使你把子元素设成flex: 1，它也没“可伸展的空间”。

• html和body都得加height: 100%（或min-height: 100vh）
• 主容器（比如.wrapper）必须是display: flex且flex-direction: column
• 内容区要用flex: 1（等价于flex: 1 1 auto），不能只写flex: 1 0 auto——后者会禁止收缩，遇到长内容时footer就被顶下去了

为什么用了flex: 1还是没效果？可能是子元素溢出或margin干扰

Flex贴底对“内部流式行为”很敏感。常见干扰源不是Flex属性本身，而是内容自带的默认行为。

• 子元素（比如main）如果有margin-bottom，会把footer往下推——用margin-top代替，或改用gap
• h1、p等块级元素自带上下margin，容易撑开空间；可统一用* { margin: 0; }重置（谨慎用于生产）
• 图片、iframe等替换元素若没设max-width: 100%，可能横向溢出导致父容器换行或高度计算异常

IE11兼容性下flex: 1失效？换用flex: 1 0 0更稳

IE11对flex: 1解析不一致，尤其在嵌套column布局中常表现为内容区不伸展。这不是bug，是它把flex-basis默认当成auto，而auto在IE里可能取内容高度而非可用空间。

• 显式写成flex: 1 0 0（即flex-grow: 1, flex-shrink: 0, flex-basis: 0）能绕过这个问题
• 注意：此时内容区最小高度为0，如果内容为空，footer会上移——需要时给main加min-height: 0或具体值
• 不用flex: 1 1 0，因为IE11对flex-shrink: 1支持不稳定

移动端键盘弹出时footer被顶起？别依赖vh单位

很多方案用min-height: 100vh起步，但在iOS Safari和部分安卓浏览器里，软键盘弹出会动态改变vh值，导致布局抖动甚至footer悬空。

• 优先用min-height: 100%配合html { height: 100% }，避开vh的运行时变化
• 如果必须响应视口变化（比如全屏表单页），监听resize事件，用window.innerHeight手动更新容器高度
• 避免在body上直接设height: 100vh——这会让滚动失效，用户根本滑不到footer

最麻烦的点往往不在Flex语法本身，而在高度链路上任意一环没传透：从html→body→主容器→内容区，漏一个height或min-height，flex: 1就彻底失能。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~