flex: 1 是最直接的自适应高度方案，当父容器为 display: flex 且 flex-direction: column 时，子元素设 flex: 1 即可填满剩余空间；但必须确保父容器有明确高度来源（如 height: 100vh），否则会退化为按内容收缩。
Flexbox 的 flex: 1 是最直接的自适应高度方案
当父容器设为 display: flex 且方向为 column 时，子元素用 flex: 1 就能自动填满剩余空间。它不依赖固定像素值，也不需要知道兄弟元素高度，真正“随内容撑开又随容器收缩”。
常见错误是忘记给父容器设置明确高度来源，比如 height: 100vh 或 min-height: 100vh；否则 flex: 1 会按内容高度收缩，失去“自适应”意义。
注意点：
-
flex: 1等价于flex: 1 1 0，其中第三个参数是flex-basis，设为0才能忽略子元素自身内容高度，纯按比例分配 - 若父容器高度由内容撑开（比如没设
height），flex: 1会退化为“不生效”，此时需配合min-height或外部约束 - 在 Safari 旧版本中，
flex: 1对textarea或含line-height的文本可能计算异常，可加min-height: 0强制重置基线
CSS Grid 的 grid-template-rows: 1fr 更适合二维场景
当布局涉及多行或多列、且某区域需“占满剩余空间”时，grid-template-rows: auto 1fr auto 比 Flexbox 更清晰——1fr 表示“剩余可用空间的一份”，天然支持等高、跨行、对齐等复杂需求。
典型误用是把整个页面强行套进 Grid：如果只是单列上下结构（如 header + main + footer），用 Grid 反而增加冗余；但若 main 区域内还要分左右两栏、且右侧需等高，则 Grid 是更自然的选择。
关键细节：
-
1fr不等于100%：它基于网格容器的可用轨道空间计算，不受子元素 margin/padding 影响 - 若某行内容超长导致整体溢出，
1fr仍会生效；但若容器本身被限制了max-height，则需配合overflow: auto防止内容裁剪 - IE11 不支持
fr单位，必须降级为flex或 JS 计算
绝对定位 + top/bottom 适合脱离文档流的场景
当某个区域必须脱离正常流（比如遮罩层、侧滑菜单、编辑器预览区），且需贴顶贴底自适应高度时，position: absolute 配合 top: 0; bottom: 0 是轻量可靠的选择。
它不参与父容器的 flex/grid 布局计算，也不受浮动或 margin collapse 影响，适合嵌套在复杂布局内部的“局部自适应”。
但要注意：
- 父容器必须有
position: relative或其他非 static 定位，否则会相对于 viewport 定位 - 该元素不再占据文档流空间，兄弟元素会“无视它存在”，需手动预留位置或用 padding 抵消
- 无法与
flex-wrap或grid-auto-rows协同工作，属于“独狼型”方案
为什么 height: auto 不总是“自适应”
height: auto 是默认值，但它只表示“由内容撑开”，不是“响应容器变化”。很多人误以为设了 height: auto 就能随父容器缩放，其实它完全不监听父级尺寸变化。
真正起作用的是约束条件：比如父容器有 max-height，子元素又设了 overflow: auto，这时 height: auto 才表现为“内容够少就收缩，够多就滚动”。
容易踩的坑：
- 在
display: table-cell中，height: auto会被忽略，强制按表格行高对齐 - Flex/Grid 子项即使设了
height: auto，也会被父容器的弹性规则覆盖，实际表现取决于align-items和flex属性 - 图片、iframe 等替换元素自带固有宽高，
height: auto只保证等比缩放，不解决容器适配问题
真正决定“自适应高度”的从来不是某个单一属性，而是约束链：从 viewport → html/body 高度 → 父容器定位/显示模式 → 子元素弹性规则。漏掉任意一环，1fr 或 flex: 1 都会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
