绝对定位元素用top/bottom拉伸无效，因父容器未设height或position:relative，导致参照系错误；需父元素有明确高度边界且非auto，否则子元素高度坍缩为0。
绝对定位元素用 top 和 bottom 拉伸高度，为什么没效果？
因为父容器没设置 height 或 position: relative，子元素的 top/bottom 会相对于初始包含块（通常是视口）计算，而不是你预期的父容器。
- 父元素必须有明确的
position值（relative、absolute或fixed），否则top/bottom的“参照系”就错了 - 父元素高度不能是
auto且无内容撑开——比如父级只有浮动子元素、或内部全是position: absolute元素，它实际高度为 0 - 若父级是 flex 容器，需确认是否意外触发了
align-items: stretch并被覆盖；某些老版 Safari 对top/bottom拉伸在 flex 子项中支持不稳定
top: 0; bottom: 0; 能让元素填满父容器吗？
能，但前提是父容器有可计算的高度边界，且自身不依赖子元素高度来反推。
- 常见有效场景：
position: relative的父容器设置了固定高度（height: 400px）、视口单位（height: 100vh）、或通过min-height+ 内容约束住下限 - 无效典型：
height: auto且无min-height的父级，此时top: 0; bottom: 0会让子元素脱离文档流后“消失”——它仍存在，但高度坍缩为 0（除非有内容或min-height） - 如果想让绝对定位元素随内容自适应高度，又同时允许上下留白，别硬拉
top/bottom，改用inset（现代写法）或配合transform+top+height: auto
用 inset 替代 top/bottom 有什么实际区别？
inset 是 top/right/bottom/left 的简写，语义更统一，但兼容性差（Chrome 89+、Firefox 123+、Safari 17.4+）。
- 写法更干净：
inset: 20px 10px 30px;等价于top: 20px; right: 10px; bottom: 30px; left: auto; - 和
top/bottom拉伸行为完全一致——同样依赖父容器有明确高度边界 - 旧项目慎用：IE 全系不支持，Vue/React 的 SSR 渲染中若服务端未降级，可能产出无效样式
- 调试时注意 DevTools 里
inset可能不显示为“已生效”，需点开展开看各方向值是否被正确解析
绝对定位 + top/bottom 拉伸后内容溢出怎么办？
这是最常被忽略的点：拉伸只管框体尺寸，不管内部内容是否可滚动或截断。
- 默认情况下，溢出内容会直接显示在框外（尤其在移动端 WebView 中容易误判为“空白”）
- 必须显式加
overflow: auto或overflow-y: auto才能触发滚动；仅overflow: hidden会裁剪，但用户看不到被裁部分 - 若内部是弹性布局（
display: flex），需额外设flex-shrink: 0防止子项压缩变形；文字类内容建议加word-break: break-word配合max-width: 100% - 在 iOS Safari 中，
overflow: auto的绝对定位容器有时滚动不灵敏，可加-webkit-overflow-scrolling: touch（仅旧版需要）
top 和 bottom 就从“自适应工具”变成“隐形 bug 制造机”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
