绝对定位元素默认不参与父容器高度计算，这是 CSS 规范行为；需改用 flex/grid 布局、JS 动态计算或伪元素占位等替代方案来实现高度撑开。
绝对定位元素默认不参与父容器高度计算，这是 CSS 规范行为，不是 bug，也无法通过纯 CSS 让它“自动回归文档流”。真要让它影响父高，得换思路——要么不让它绝对定位，要么用其他方式让父容器“感知”到它的存在。
为什么 position: absolute 子元素永远撑不开父容器
浏览器在布局阶段会跳过所有 position: absolute 元素的尺寸贡献。父容器的 height 只基于仍在文档流中的子元素（比如普通 div、文本节点、未设定位的图片）计算。哪怕你用 top: 0; bottom: 0; 把子元素拉满，只要它仍是 absolute，父容器就对其高度“视而不见”。
- DevTools 里看到父容器
height: auto却显示0px，是正常现象 -
overflow: hidden加了也没用——没东西可溢出，自然不裁 -
min-height不是解法，它只设下限，不读取子元素实际占位
用 display: flex 或 display: grid 替代 position: absolute 的真实场景
多数所谓“必须绝对定位”的需求，其实只是想控制对齐或覆盖位置，flex 和 grid 完全能替代，且子元素天然参与父容器高度计算。
- 右上角图标：父容器设
display: flex; justify-content: flex-end; align-items: flex-start;，子元素就贴右上，同时撑高父容器 - 居中弹层：用
display: grid; place-items: center;，遮罩和内容都参与尺寸计算 - 注意：
flex容器内若子元素仍写position: absolute，塌陷照旧——关键是要让定位逻辑由布局系统承担，而非混用
JS 动态计算 getBoundingClientRect().bottom 的实操要点
如果真离不开 absolute（如图表标注、游戏 UI 层），就得靠 JS 告诉父容器“它该有多高”。重点不是读 offsetHeight，而是算视觉占位。
立即学习“前端免费学习笔记（深入）”；
- 用
getBoundingClientRect()，不是offsetHeight：后者只返回自身盒高，前者返回视口中的绝对bottom值 - 遍历所有绝对定位子元素，取
Math.max(...rects.map(r => r.bottom)) - 减去父容器自身的
getBoundingClientRect().top，才是相对父容器的底部偏移 - 记得加上父容器的
padding-top和border-top，否则设置高度会多出一截 - 触发时机很重要：用
ResizeObserver监听子元素变化，比window.onload或setTimeout更可靠
伪元素或 padding-bottom 占位的适用边界
这类纯 CSS 方案只在子元素位置和尺寸高度可控时才靠谱，比如固定高度的徽章、底部工具栏。
- 若子元素靠
bottom: 0定位，padding-bottom很难匹配其实际位置，容易留白或遮挡 - 伪元素
::after { display: block; height: 48px; }等效于空div，但更轻量；前提是 DOM 顺序允许你在父容器末尾插入占位 - 响应式断点切换后，静态占位大概率失效——这时 JS 方案反而更稳
真正容易被忽略的点是：别花时间“修复”绝对定位的高度塌陷，先问一句——这个元素本该属于内容流吗？如果是提示、遮罩、装饰性覆盖，它就不该撑开父容器；如果是卡片、列表项、主内容，那它就不该用 absolute。
