用 top: 0 和 bottom: 0 可使绝对定位元素垂直撑满父容器，但前提是父元素必须有明确高度上下文（如固定 height、flex/grid 布局或内容撑开），且需设置 position: relative 等非 static 定位以建立定位上下文；若还需水平撑满，须同时设 left: 0 和 right: 0。
绝对定位元素怎么撑满父容器高度
用 top: 0 和 bottom: 0 是最直接的办法，但前提是父元素得有明确的高度上下文，否则它会塌缩成 0，子元素再拉也拉不出高度。
父元素必须有可计算的高度
绝对定位的子元素靠 top/bottom 拉伸时，浏览器需要知道“从哪到哪”——也就是父元素得有确定的高度值，不能是 height: auto 且内部没内容撑开。
- 父元素设了
height、min-height或max-height（只要不是auto且未被内容撑开） - 父元素是 flex 容器且设了
align-items: stretch（默认），且自身高度由其他规则决定 - 父元素是 grid 容器，且所在轨道有明确尺寸（如
grid-template-rows: 1fr） - 常见坑：父元素只是
position: relative，但没设高、没内容、也没 flex/grid 布局，此时top:0; bottom:0无效，子元素高度为 0
别漏掉 left 和 right
只写 top:0; bottom:0 只控制垂直方向；如果还想水平撑满，得补上 left: 0; right: 0。否则子元素宽度还是按内容或默认 auto 计算。
- 垂直填满：
top: 0; bottom: 0 - 水平填满：
left: 0; right: 0 - 四边都写上才真正“贴满”，类似一个全屏遮罩的效果
- 如果只想要高度拉满、宽度保持内容宽度，就只写 top/bottom，left/right 别碰
z-index 和 overflow 的隐性影响
top/bottom 拉满本身不触发重排，但容易和 overflow、z-index 打架。
- 父元素设了
overflow: hidden，但子元素用top:0; bottom:0拉满，一般没问题；但如果子元素内部又溢出（比如文字换行异常、图片超宽），可能被裁掉，得检查子元素内部布局 - 多个绝对定位子元素堆叠时，
z-index必须显式设置，否则层叠顺序由 DOM 顺序决定，容易误以为“没拉满”其实是被盖住了 - 父元素没设
position: relative（或其它非 static），子元素的top/bottom会相对于最近的定位祖先，而不是你肉眼看到的“父盒子”——这是最常被忽略的定位上下文问题
真正卡住的往往不是 top 和 bottom 写没写对，而是父元素根本没形成有效的定位上下文或高度上下文。调样式前先用 DevTools 看一眼父元素的 computed height 和 position，比反复改子元素更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
