footer不贴底主因是高度链路未传透：html、body及主容器需设height: 100%或min-height: 100vh，主容器用flex column，内容区用flex: 1（非flex: 1 0 auto），并排查margin、溢出及IE11兼容性问题。
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就彻底失能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
