17370845950

内容无法拉伸的主因是父容器无高度、子元素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 计算，但那就不是“拉伸”，而是“模拟拉伸”了。