min-h-screen是设最小高度而非固定高度，内容多时自动延展；错误使用会导致白屏、footer悬空、滚动失效，移动端应优先用min-h-[100dvh]并配合flex布局确保footer贴底。
min-h-screen 是最常用也最容易出错的最小高度类——它不是“让元素刚好等于屏幕高”，而是“至少撑满一屏，内容多了就自动延展”。用错地方时，页面会白屏、footer 飘在半空、滚动失效，甚至移动端 Safari 里底部突然留白。
min-h-screen 和 h-screen 的根本区别
两者都基于视口（viewport）高度，但行为完全不同：
-
h-screen等价于height: 100vh：强制固定高度，内容超长会被截断或溢出，且不响应地址栏收起/展开（尤其 iOS Safari） -
min-h-screen等价于min-height: 100vh：只设下限，内容少时贴底，内容多时自然撑开，更符合真实布局需求 - 移动端必须优先选
min-h-screen；若需更高兼容性（如适配地址栏动态变化），应改用min-h-[100dvh]（Tailwind 3.3+ 支持）
为什么 footer 没贴底？检查这三处
常见现象是 min-h-screen 写了，但 footer 还是浮在中间。问题通常不在 footer 本身，而在父容器结构：
- 必须把
min-h-screen和flex flex-col加在**同一层父容器**上（比如一个包裹<header></header>、<main></main>、<footer></footer>的<div>），不能只加在 <code>上 -
<main></main>必须加flex-1（即flex: 1 1 auto），否则它不占剩余空间，footer 就没被“推”下去 - 避免给
<main></main>加min-h-screen或h-full：这会让它强行占满一屏，footer 永远不可见 - 确认最外层用了
min-h-screen，而不是h-screen（后者在 flex 容器里常被约束失效） - 删掉所有可能触发新 BFC 的祖先样式，比如
overflow-hidden、transform、position: relative套太多层 - 显式加
bg-center，某些浏览器默认对齐左上，bg-cover不会自动修正 - 示例结构：
<div class="min-h-screen bg-cover bg-center" style="background-image: url('/hero.jpg')"></div> - 禁止给
或设height: 100%，只靠min-h-screen+flex驱动 - 在
加<meta name="viewport" content="height=device-height, initial-scale=1.0">，缓解微信内置浏览器识别问题 - 如需更强控制，升级 Tailwind 并使用
min-h-[100dvh]：它能响应地址栏动态变化，且 fallback 行为比纯h-[100dvh]更可靠
背景图不铺满？别只盯 bg-cover
背景图只显示左上角一小块，90% 是因为父容器没真正撑开高度：
立即学习“前端免费学习笔记（深入）”；
移动端 Safari 和微信里高度跳变怎么办
本质是 vh 单位在地址栏显隐时重算，而 min-h-screen 虽比 h-screen 稳定，仍可能因 body 渲染异常导致 footer 上浮：
真正难的不是写对类名，而是理解「最小高度」在 flex 布局中的传导逻辑——它不保证视觉上“全屏”，只保证容器有足够空间去分配；一旦中间内容区域没正确声明生长意愿（flex-1），整个链条就断了。
