position: absolute 子元素天然脱离文档流致父容器塌陷是规范行为；应改用 grid/flex 实现右上角图标、居中遮罩等布局，或用 resizeobserver 动态设 min-height 并基于 getboundingclientrect().bottom 计算真实高度。
position: absolute 的子元素天然脱离文档流，父容器高度塌陷不是 bug，是规范行为。想让父容器“感知”到它的存在，不能靠 CSS 自动计算，必须明确高度责任归属——要么换布局方式，要么用 JS 主动算。
改用 display: grid 或 display: flex 替代 position: absolute
90% 声称“必须用 absolute”的场景，其实只是要右上角图标、居中弹层、对齐某一边——这些完全可用 grid 或 flex 实现，且子元素仍参与高度计算。
- 右上角图标：
.parent { display: flex; justify-content: flex-end; align-items: flex-start; } - 全屏居中遮罩：
.parent { display: grid; place-items: center; } - 顶部+底部固定区域：
.parent { display: grid; grid-template-rows: auto 1fr auto; }，再用grid-row分配子元素
关键优势：无需 JS、无重绘风险、响应式天然支持、高度自动撑开。
必须保留 position: absolute？用 ResizeObserver 动态写 min-height
这是目前最可靠、最轻量的 JS 方案。不要监听父容器，要监听每个 absolute 子元素——它们的内容变化才是高度变动的源头。
- 在回调中调用
el.getBoundingClientRect()，取所有子元素的rect.bottom最大值 - 减去父容器自身的
parentRect.top（注意：不是offsetTop） - 再和父容器内正常流内容的
offsetHeight取Math.max()，避免漏掉非 absolute 元素 - 写入父容器的
style.minHeight，而非height——允许内容自然溢出，更安全 - 务必等字体、图片加载完成后再首次计算；
DOMContentLoaded阶段取值大概率不准
为什么 offsetHeight 和 getBoundingClientRect().height 都不能直接用
这两个值都只反映元素自身的盒模型尺寸，不包含它在父容器坐标系中的实际落点位置。
-
offsetHeight返回的是元素渲染后的 clientHeight + border + padding，但忽略top: 40px或bottom: 20px带来的视觉占位 -
getBoundingClientRect().height同样只返回矩形高度，比如一个height: 100px但bottom: 0的元素，其rect.bottom才是它真正“压”在父容器底部的坐标 - 你真正需要的是：
Math.max(...allAbsoluteEls.map(el => el.getBoundingClientRect().bottom)) - parentRect.top
别踩这些坑
很多方案看似能“撑高”，实则埋雷：
- 给父容器加
overflow: hidden或border——这是为解决浮动塌陷设计的 BFC 触发机制，对absolute完全无效 - 只遍历第一个匹配
[style*="absolute"]的元素，漏掉bottom: 0或transform缩放的子项 - 没减去父容器的
padding-top和border-top，导致最终高度多出一截 - 用
requestAnimationFrame轮询计算——不如ResizeObserver精准，且性能差
最易被忽略的一点：如果子元素用了 transform: scale(1.2)，getBoundingClientRect() 已自动包含缩放效果，无需额外乘除换算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
