height: 100% 不起作用是因为百分比高度依赖父元素明确高度，需设置 html、body { height: 100%; }；更可靠方案是使用 100vh 或 flex 布局（如 body { min-height: 100vh; display: flex; flex-direction: column; }，main { flex: 1; }），避免 position: absolute 导致布局塌陷等问题。
为什么 height: 100% 不起作用？
直接写 height: 100% 的容器往往撑不满屏幕，不是代码写错了，而是 CSS 百分比高度依赖父元素有明确高度。HTML 和 body 默认高度是“内容高度”，不是视口高度，所以从根往下链式继承会断在某一层。
必须显式给 html 和 body 设置高度：
html, body {
height: 100%;
margin: 0;
padding: 0;
}
之后子容器才能靠 height: 100% 继承上去。但注意：如果父容器有 padding 或 border，height: 100% 会按 content box 计算，可能溢出——这时候用 box-sizing: border-box 更稳。
用 vh 单位最简单可靠
100vh 表示视口高度的 100%，不依赖父级，也不受 margin/padding 影响，适合做全高容器。
常见写法：
.full-height {
height: 100vh;
}
但要注意几个现实问题：
- 移动端 Safari 在键盘弹出时会把
vh缩小（把地址栏和键盘都算进视口），导致容器突然变矮 - 部分 Android 浏览器对
vh支持不稳定，尤其老版本 Chrome - 如果页面有固定 header/footer，直接
100vh会导致内容被遮挡或滚动条异常
解决办法：用 calc(100vh - 60px) 减去 header 高度；或者用 JS 动态监听 window.innerHeight 并更新自定义 CSS 变量。
Flex 布局让容器自动占满剩余高度
当页面有头部+主体+底部结构时，100vh 容易硬编码出错，用 Flex 更健壮：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
<p>header { height: 60px; }
main { flex: 1; } /<em> 自动撑满剩余空间 </em>/
footer { height: 40px; }</p>
关键点：
-
min-height: 100vh确保 body 至少占满一屏，内容多时仍可滚动 -
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，能响应高度变化 - 不要给
main设height，否则会覆盖 flex 行为
这个方案兼容性好（IE11+ 支持），且天然适配内容动态增减的场景。
避免用 position: absolute 撑高
有人用 top: 0; bottom: 0; 强制拉伸容器，看似能填满，但会带来三个实际问题：
- 脱离文档流，父容器无法感知其高度，导致外层布局塌陷
- 内部元素用
margin或padding时容易错位，调试困难 - 与 sticky header、滚动监听等交互逻辑冲突，比如
getBoundingClientRect()返回值不可靠
除非你明确需要脱离流（如模态框遮罩层），否则优先选 vh 或 Flex。
真正麻烦的不是怎么写满高度，而是写满之后内容溢出、滚动行为异常、或在不同设备上表现不一致——这些细节比一行 height: 100% 更值得花时间验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
