内容无法拉伸的主因是父容器无高度、子元素height:auto或Flex/Grid未启用拉伸机制；应优先用Flex的flex:1或Grid的1fr替代height:100%，并确保父容器有明确高度。
内容无法拉伸，通常是因为父容器没设高度、子元素用了 height: auto（默认行为），或 Flex/Grid 容器没开启“拉伸”机制。要让内容填满剩余空间，关键不是强行设 height: 100%，而是靠布局模型本身的能力来分配可用空间。
Flex 布局中用 flex: 1 填充剩余高度
这是最常用也最可靠的方案，尤其适合侧边栏 + 主内容这类经典结构。前提是父容器设为 display: flex 且有明确高度（比如 height: 100vh 或继承自 body）。
常见错误是只给子元素加 flex: 1，但忘了父容器没设高度，或者没设 flex-direction: column（横向布局下 flex: 1 拉的是宽度，不是高度）。
- 顶部固定高导航 + 中间滚动区 + 底部固定高页脚：中间区域设
flex: 1，自动撑满剩余空间 - 必须确保父容器有计算出的高度，否则
flex: 1无参照可依 - 若中间内容超长需滚动，给该区域加
overflow-y: auto，避免撑破容器
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header { height: 60px; }
.main { flex: 1; overflow-y: auto; }
.footer { height: 40px; }
Grid 布局中用 fr 单位分配剩余空间
Grid 更适合多区域、等比或弹性划分的场景。1fr 表示“占用剩余可用空间的一份”，比百分比和 flex: 1 更直观，且天然支持多行/列同时分配。
立即学习“前端免费学习笔记（深入）”；
容易忽略的是：Grid 容器同样需要显式高度；fr 不会压缩内容，但若子元素自身设了 min-height 或内容过少，可能看起来“没拉伸”——实际是它已按规则占满，只是背景或边框不明显。
-
grid-template-rows: 60px 1fr 40px直接定义三行，中间自动填满 - 想让某区域最小高度不为零，可写
minmax(0, 1fr)防止内容溢出时被强制压缩 - 与 Flex 不同，Grid 子项默认不拉伸（
align-items: stretch是默认值，但仅对块级子元素生效；内联元素需额外设align-self: stretch）
.container {
display: grid;
grid-template-rows: 60px 1fr 40px;
height: 100vh;
}
为什么 height: 100% 经常失效
因为 % 高度依赖父元素有**明确像素高度**（非 auto）。只要链路上任一祖先没设高度，height: 100% 就退化为 height: auto，彻底失效。
典型陷阱：
-
html, body { height: 100%; }忘了加，导致根下所有%高度断链 - 中间某个 wrapper 用了
display: inline-block或浮动，破坏了高度继承流 - 用 JS 动态插入内容后没重算高度，或 CSS 加载顺序导致初始渲染时高度未就绪
结论：除非你能完全掌控整条祖先链的高度，否则别依赖 height: 100% 做填充。Flex 和 Grid 是更鲁棒的选择。
真正难的不是写对那几行 CSS，而是判断当前结构是否允许 Flex/Grid 介入——比如嵌套在第三方组件里、受 Shadow DOM 隔离、或需要兼容 IE10 以下。这时候得退回到绝对定位 + top/bottom 计算，但那就不是“拉伸”，而是“模拟拉伸”了。
