不能。绝对定位元素不参与父容器高度计算是css规范行为；父容器无高度上下文导致top/bottom无效；真正解法是js动态设min-height、占位元素或改用flex/grid布局。
不能。绝对定位元素天生不参与父容器高度计算，这不是 bug，是 CSS 规范行为。所有试图“让它撑开”的方案，本质都是绕过它、替代它，或手动补位。
为什么 top: 0; bottom: 0 没效果
很多人写 top: 0; bottom: 0; 后发现子元素没拉满，根本原因不是样式写错，而是父容器没有可计算的高度上下文：
- 父容器
position是relative，但没设height、min-height，内部又全是absolute子元素 → 计算出的高度为0px - 父容器是
display: flex或grid，但子元素加了position: absolute→ 它立刻退出主轴/交叉轴尺寸分配，父容器只看其他非absolute元素 - 写了
height: 100%，结果反而覆盖了top/bottom的拉伸逻辑，变成按百分比计算（而父高为 0，100% 还是 0）
真正能用的三种做法
不是“让 absolute 撑开”，而是“不让父容器依赖它来撑开”：
-
JS 动态设置
min-height：用getBoundingClientRect()获取所有absolute子元素在视口中的bottom值，取最大值，再减去父容器getBoundingClientRect().top，得到相对父容器的底部偏移；必须包裹在requestAnimationFrame或ResizeObserver中，否则字体加载、窗口缩放后会错位 -
占位元素或伪元素：在父容器内插入一个非
absolute的空<div class="placeholder"></div>，或用::after伪元素设display: block; height: 200px;；注意 DOM 顺序要靠前，且不能也设position: absolute -
改用 flex/grid 布局：比如右上角图标，用
display: flex; justify-content: flex-end; align-items: flex-start;；全屏遮罩用display: grid; place-items: center;—— 它们天然参与高度计算，无需 hack
容易被忽略的关键点
DevTools 里看到父容器高度为 0px，第一反应不该是改子元素样式，而是点开它的 Computed 面板，确认 height 是否标注了 (computed from children)。如果没有，说明父容器确实没从任何流内元素获得高度信号——此时问题不在子元素怎么定位，而在父容器是否本就该承载内容流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
