height: 100%撑不满屏幕是因为浏览器缺乏明确父高度基准，默认html和body均为height: auto；必须同时设置html { height: 100%; }、body { min-height: 100%; margin: 0; }，并确保所有中间容器显式继承高度。
直接写 height: 100% 撑不满屏幕，不是你漏写了什么，而是浏览器根本没地方去“算”这个 100%——它需要一个明确的父高度作为基准，而默认的 html 和 body 都是 height: auto。
为什么 height: 100% 在 html/body 上也失效
很多人给 html, body { height: 100%; } 后发现子元素还是不撑高，问题出在两个地方：
-
html的包含块是“初始包含块”（initial containing block），它的高度等于视口高度，但 CSS 规范要求：只有当html显式设了height，它才把这个值传给body；否则body仍按auto处理 -
body默认有margin（通常是 8px），会撑开自身高度，导致height: 100%实际计算时被 margin 推偏，甚至触发最小高度保护
正确写法必须同时满足三项：
html { height: 100%; }-
body { min-height: 100%; margin: 0; }（用min-height而非height，避免长页面被截断） - 所有中间容器（比如
.app、.wrapper）都得显式继承：height: 100%或min-height: 100%
height: 100vh 看似简单，但移动端 Safari 会跳变
100vh 是最省事的写法，但它在 iOS Safari（15+）里不是“初始视口高度”，而是“当前可视区域高度”。地址栏收起、键盘弹出、页面滚动时，100vh 对应的像素值会实时变化，导致元素突然拉伸或塌陷。
典型表现：
- 软键盘弹出后，输入框被顶出视口
- 页面刚加载时正常，一滚动，底部留白或内容被裁切
- 缩放页面后，
100vh计算失准，出现滚动条
更稳的替代是：
-
min-height: 100dvh（dynamic viewport height），2023 年起主流浏览器支持，Safari 16.4+ 已稳定 - 如果需兼容旧版 Safari，用
height: 100vh+resize事件监听 +document.documentElement.clientHeight动态 fallback
Flex 布局中 flex: 1 填不满？检查三处硬性条件
flex: 1 不是自动填高魔法，它只在满足以下全部条件时才生效：
- 父容器必须有
display: flex且flex-direction: column（纵向填充） - 父容器自身要有确定高度上下文，比如
min-height: 100dvh或height: 100vh - 目标子元素不能被
min-height: auto锁死——常见于内部含图片、display: flex子项或长文本的场景，必须加min-height: 0
错误示例：
main {
flex: 1;
/* 缺少 min-height: 0，内部 img 或 flex 子项会让它撑高而非收缩 */
}
正确写法：
main {
flex: 1;
min-height: 0;
}
Grid 中用 1fr 填剩余高度，footer 别被挤出 DOM
当布局是 header + main + footer，想让 main 占满剩余空间，grid-template-rows: auto 1fr auto 看似合理，但实际可能让 footer 被撑出屏幕外，尤其在内容少时。
更可控的做法：
- 父容器设
min-height: 100dvh，保证基础高度 - 用
grid-template-rows: auto 1fr min-content，其中min-content让footer只占自身内容所需高度，不抢空间 - 如果
footer必须固定在底部（即使内容少），改用grid-template-rows: auto 1fr fit-content(60px)，并确保其height或min-height显式设值
注意：1fr 只响应父容器的可用高度，如果父容器没高度上下文，1fr 就退化为 auto。
真正容易被忽略的是：高度链路上任意一层的 display: contents、position: absolute 或未重置的第三方 CSS（如 Bootstrap 的 body margin）都会悄悄打断继承。调试时优先打开 DevTools 的 “Computed” 面板，逐层看 height 的最终计算值，而不是只盯 CSS 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
