min-h-screen + flex-col 是最稳妥的底部固定方案，因视口高度稳定、内容高度不可控，min-h-screen确保容器至少占满一屏，flex-col配合flex-1让主体撑开剩余空间，页脚自然贴底；不依赖JS、无重排、兼容现代浏览器，且支持滚动与自适应。
为什么 min-h-screen + flex-col 是最稳妥的底部固定方案
因为浏览器视口高度（screen）是已知且稳定的，而内容高度不可控；用 min-h-screen 确保容器至少占满整个视口，再配合 flex-col 和 flex-grow 类让主体区域“撑开”剩余空间，页脚自然被推到底部。它不依赖 JavaScript、不触发重排、兼容所有现代浏览器，比 position: fixed 或 absolute 更符合语义和可访问性要求。
必须包裹在 flex-col 容器里，否则 flex-grow 不生效
flex-grow 只对 flex 子项起作用，所以父容器必须是 flex 且方向为 col。常见错误是只加 min-h-screen 却忘了设 flex flex-col，导致主体无法伸展，页脚直接叠在内容下方。
正确结构要点：
- 根容器（如
<div class="min-h-screen flex flex-col">）必须同时包含min-h-screen、flex、flex-col - 主体内容区域用
flex-1（等价于flex-grow: 1），不能用flex-grow这个类名——Tailwind 默认不生成它，得配flex-1 - 页脚放在容器末尾，无需额外定位类
<div class="min-h-screen flex flex-col"> <header>...</header> <main class="flex-1">...</main> <footer>© 2024</footer> </div>
当页脚内容变高时，页面会自动撑出滚动条而不是遮挡内容
这是该方案的关键优势：它不强制截断或覆盖。如果页脚内有大段文字、多个链接或响应式卡片，flex-1 会压缩主体区域但不会让页脚溢出视口——一旦总高度超过 screen，浏览器原生滚动就接管了。
立即学习“前端免费学习笔记（深入）”；
需注意的边界情况：
- 若主体内容极少（比如只有几行字），页脚仍会停在视口底部，不会“悬空”
- 若页脚设置了
padding或margin，要确认是否影响整体高度计算（一般不影响，因min-h-screen是最小值） - 避免给
main设min-height或height，会干扰flex-1的弹性行为
移动端 Safari 中 min-h-screen 可能失效？加 h-screen 回退
iOS Safari 在地址栏收起/展开时会动态调整 screen 高度，导致 min-h-screen 计算滞后，页脚短暂上浮。这不是 bug，而是视口变化未触发重绘。临时解法是在根容器上叠加 h-screen：
<div class="min-h-screen h-screen flex flex-col">
这样能锁定初始高度，同时保留 min-h-screen 应对内容增长。不过要注意：如果页面真实内容超过一屏，h-screen 会导致底部内容被裁剪——所以更推荐仅在明确需要“始终满屏”时使用，日常场景优先信任 min-h-screen + flex-col 的组合。
真正容易被忽略的是：页脚本身如果有 position: sticky 或 transform，会破坏 flex 布局流，务必保持其为普通文档流元素。
