必须同时设置html和body的min-height: 100vh，因为body的包含块（html）无显式高度时，其百分比或vh值会计算异常；还需清除默认margin和padding，并避免height与min-height混用导致失效。
页面最小高度不是靠 html 标签的某个属性实现的，而是用 CSS 的 min-height 作用在 html 和 body 上才真正生效。
为什么只设 body 的 min-height 不起作用
浏览器默认给 html 和 body 都设了 height: auto，而 min-height: 100vh 在 body 上会失效——因为它的包含块（即 html）没有显式高度，百分比或 vh 值就可能被忽略或计算异常。
- 必须同时写
html, body { min-height: 100vh; } - 顺手清掉默认
margin和padding，避免视口内留白：html, body { margin: 0; padding: 0; } - 如果用了
normalize.css或其他重置样式，检查它是否把html的min-height覆盖成了0或auto
min-height: 100vh 比 height: 100vh 更安全
用 height: 100vh 会让元素严格卡死在视口高度，内容一多就直接溢出、遮挡页脚；而 min-height 允许它随内容自然撑高，不截断、不隐藏。
- 适合带固定页头/页脚的布局：页脚能始终贴底，内容少时撑满，内容多时下拉
- 移动端 Safari 有地址栏缩放问题，
100vh可能误算为“初始视口”，但min-height至少不会让页面变矮 - 不要混用：
height: 100%+min-height: 100vh容易冲突，优先选后者
IE8–IE11 兼容方案怎么写
IE8 不支持 vh 单位，IE9+ 支持但对 min-height 的继承处理不稳定。稳妥做法是降级为 height: 100% 配合 html, body { height: 100%; }，再让主容器用 min-height: 100%。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 基础兼容写法：
html, body { height: 100%; }+.main { min-height: 100%; } - 若需精确减去页头页脚高度（比如 header 高 60px，footer 高 40px），用 JS 动态算：
document.documentElement.clientHeight - 100 - CSS 自定义属性（
--vh）方案在 IE 完全不可用，别浪费时间适配
滚动区域里设 min-height 的常见误操作
给一个带 overflow-y: auto 的容器设 min-height，本意是“至少显示两行内容”，结果发现滚动条没出现、内容被裁剪——大概率是忘了设 height 或父容器没高度约束。
-
min-height只控制“最小不小于多少”，不控制“最多显示多少”，滚动依赖的是height+overflow - 正确组合：
.scroll-container { height: 300px; min-height: 200px; overflow-y: auto; } - 如果父容器是 flex 布局，确认它没加
align-items: center之类让子项垂直居中，这会干扰高度计算
最常被忽略的一点：CSS 优先级。哪怕你写了 min-height: 100vh，只要某处 !important 的 height: 500px 生效了，min-height 就完全失效——查 computed styles 比对着代码猜更靠谱。
