绝对定位元素不撑开父容器高度是 css 规范行为；getboundingclientrect() 比 offsetheight 更可靠因其返回视口绝对位置；flex/grid 可替代 absolute 实现对齐并参与高度计算；padding-bottom 或伪元素占位更稳妥于动态内容场景。
绝对定位元素不会撑开父容器高度，这不是 bug，是 CSS 规范明确要求的行为。父容器在计算 height 时直接忽略所有 position: absolute 子元素——它根本“看不见”它们。
为什么 getBoundingClientRect() 比 offsetHeight 更可靠
offsetHeight 只返回元素自身盒模型高度，完全不包含 top、bottom 偏移带来的实际占位；而 getBoundingClientRect() 返回的是元素在视口中的绝对位置，能真实反映它“压”在页面上的区域。
- 必须等渲染完成再调用，推荐用
requestAnimationFrame或ResizeObserver包裹 - 多个
absolute子元素共存时，要遍历取所有rect.bottom的最大值，不是第一个 - 算出最大
bottom后，得减去父容器自身的getBoundingClientRect().top，才能得到相对父容器的底部偏移 - 别忘了父容器的
padding-top和border-top，否则设置height会多出一截
用 display: flex 替代 position: absolute 的适用场景
很多所谓“必须绝对定位”的需求，其实只是想实现视觉对齐（比如右上角图标、居中弹层），display: flex 配合 justify-content 和 align-items 就能天然参与高度计算，无需 hack。
- 父容器设
display: flex; justify-content: flex-end; align-items: flex-start;，子元素就自动贴右上角，且撑高父容器 - 若需居中覆盖（如模态框遮罩），可用
place-items: center+display: grid，比absolute+transform语义更清晰 - 注意：flex 容器内子元素若仍设
position: absolute，塌陷照旧——关键是要让定位逻辑由 flex/grid 承担，而不是混用
手动设置 min-height 或 padding-bottom 的前提条件
纯 CSS 方案只在子元素尺寸和位置可预测时才安全，否则容易错位或留白。
-
min-height不适合动态内容（如异步加载的文案行数变化），它只在内容不足时生效，而这里“内容”本身不被计算 -
padding-bottom更稳妥，比如文字固定为单行 24px 高，就写padding-bottom: 24px，它不影响溢出，也兼容缩放 - 如果子元素靠
bottom: 0定位，padding-bottom无法匹配其实际位置，此时只能换方案 - 伪元素占位（如
::after { display: block; height: 24px; }）效果等同于空div，但更轻量，前提是 DOM 顺序可控
真正难的不是选哪个技术方案，而是判断这个 absolute 元素是否本该属于父容器的内容流——如果它只是视觉覆盖（如徽章、遮罩），强行让它撑高父容器，后续响应式、可访问性、维护成本都会变高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
