必须同时设置html和body的min-height: 100vh并清除默认边距，否则因html无显式高度导致body的min-height计算异常；推荐优先使用min-height而非height，避免混用失效，移动端可选用兼容性更好的min-height: 100dvh。
直接用 min-height 就行，别碰 height，更别写 height: auto !important 这类过时 hack。
为什么只设 body 的 min-height 不起作用
因为 body 的包含块是 html，而浏览器默认给 html 设了 height: auto——它没显式高度，min-height: 100vh 在 body 上就会计算异常或被忽略。
- 必须同时写：
html, body { min-height: 100vh; margin: 0; padding: 0; } - 如果用了
normalize.css或其他重置样式，检查它是否把html的min-height覆盖成了0或auto - 移动端 Safari 地址栏收起时，
100vh会跳变；更稳的写法是min-height: 100dvh（Chrome 105+、Safari 16.4+、Firefox 112+ 支持）
min-height 和 height 混用会失效
height: 200px 是强制固定高度，内容一多就溢出或遮挡页脚；min-height: 200px 才是“至少 200px，再多也撑开”的正确语义。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 写了
height: 200px又加min-height: 200px→ 实际等同于固定高度，min-height被覆盖 - 别用
height: auto !important; height: 200px;——这是 IE6 兼容 hack，现在反而容易和 Flex 布局冲突 - Flex 容器里子元素的
min-height依然生效，但要注意flex-shrink: 0或align-self: flex-start可能让它退回到内容高度
滚动区域里设 min-height 却不出现滚动条
min-height 只控制“最小不小于多少”，不控制“最多显示多少”。滚动依赖的是 height + overflow 组合。
- 正确写法：
.scroll-container { height: 300px; min-height: 200px; overflow-y: auto; } - 如果父容器是 Flex 布局，确认没加
align-items: center这类让子项垂直居中的规则，它会干扰高度约束 - 给表格单元格（
<td>）设 <code>min-height无效——display: table-cell不支持该属性；改用line-height或包裹一层<div> 再设 <p>最常被忽略的一点：CSS 优先级。哪怕你写了 <code>min-height: 100dvh，只要某处!important的height规则在后，它就直接失效。查开发者工具的“Computed”面板，看最终生效的是哪一条。
