必须同时设置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 允许它随内容自然撑高，不截断、不隐藏。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 适合带固定页头/页脚的布局：页脚能始终贴底，内容少时撑满，内容多时下拉
• 移动端 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, 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 比对着代码猜更靠谱。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！