粘性页脚用 min-height 而不是 height，因内容高度动态：min-height: 100vh 保证至少一屏且内容多时自然撑开，避免页脚悬空或截断；需作用于父容器并配合 flex-grow: 1 布局，禁用 fixed/absolute 定位以保障语义与兼容性。
粘性页脚为什么用 min-height 而不是 height
因为页面内容高度是动态的——可能比视口高，也可能矮。用 height: 100vh 会强制拉伸容器，导致内容少时页脚被顶到中间；而 min-height: 100vh 只保证“至少占满一屏”，内容多时自然撑开，不会遮挡或错位。
常见错误现象：footer 在短内容页里飘在半空，或长内容页里被截断。
-
min-height: 100vh必须加在包裹header、main、footer的父容器上（比如body或某个div.layout） - 如果父容器有
padding或border，记得加box-sizing: border-box，否则100vh会溢出 - 移动端 Safari 对
vh的解析有偏差（地址栏收放影响），此时更稳妥的是用100dvh（但需检查兼容性）
Flex-grow 实现页脚触底的关键写法
靠 flex 布局把中间内容区域“撑满剩余空间”，页脚就自然被挤到底部。核心不是给页脚设 margin-top: auto，而是让 main 区域具备弹性生长能力。
使用场景：内容区高度不确定，且需要页脚始终贴底、不遮挡内容、不随滚动跳动。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: flex和flex-direction: column -
main（或内容容器）要加flex-grow: 1，不是flex: 1—— 后者会重置flex-shrink和flex-basis，容易引发意外收缩 -
footer不需要额外样式，但不能设固定height外的flex属性，否则会干扰布局流
html <div class="layout"> <header>Header</header> <main>Content</main> <footer>Footer</footer> </div>
css
.layout {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
为什么不用 position: fixed 或 absolute
这类定位会让页脚脱离文档流，导致两个典型问题：内容过长时页脚盖住正文；内容过短时页脚悬空在视口底部，但用户滚动后它还卡在那里，和真实“触底”语义不符。
性能/兼容性影响：固定定位本身开销小，但需要额外 JS 判断滚动位置来切换状态（比如“滚动到底才显示”），反而增加复杂度和潜在 bug。
-
position: fixed的页脚无法响应父容器内边距、背景色等上下文样式 - 如果页面有 sticky 导航栏，
fixed页脚容易和它发生层叠冲突（z-index管理成本高） - 无障碍访问中，
fixed元素可能被读屏器跳过或误读为悬浮控件
IE11 兼容时的降级处理要点
IE11 对 flex-grow 支持不完整（尤其在 column 方向），直接用上述写法会出现页脚不上浮。必须配合 height + calc() 回退。
参数差异：flex-grow 在 IE 中对 flex-direction: column 的子元素行为不稳定，而 calc(100vh - header高度 - footer高度) 更可控。
- 先写现代写法，再用
@supports not (flex-grow: 1)或 IE 条件注释包裹降级规则 -
header和footer高度尽量用固定值（如60px），避免用em或%增加calc计算风险 - 不要依赖
vh在 IE 中的精确性——它在 IE 中常被视口缩放干扰，优先用100%配合父容器height
实际项目里最常被忽略的，是 main 元素内部内容溢出时没设 overflow: visible 或未重置 max-width，导致 flex-grow 撑开后文字换行异常或图片变形。这和粘性逻辑无关，但会让效果看起来“失效”。
