因为css规范规定：当absolute/fixed元素的top和bottom均设为非auto值时，浏览器会按“高度=父容器可用高度−top−bottom”拉伸；但前提是父容器必须已定位且具有可计算高度，否则拉伸失效。
top 和 bottom 同时设为具体值，为什么元素高度被拉伸？
因为浏览器在 position: absolute（或 fixed）下，当对立方向（top 和 bottom）都设为非 auto 值时，会触发“拉伸计算”：元素高度 = 父容器可用高度 − top 值 − bottom 值。这不是“猜测行为”，而是 CSS 定位规范明确规定的尺寸解析逻辑。
这个机制只在以下条件下生效：
- 元素
position必须是absolute、fixed或sticky（relative不适用） - 父容器必须是“已定位祖先”——即
position: relative、absolute或fixed；否则会退到视口，高度基准不可控 - 父容器必须有可计算的高度（不能是
height: auto且无内容/约束撑开）
父容器没高度，top/bottom 拉伸就失效的典型表现
最常遇到的情况是：写了 top: 0; bottom: 0;，但元素在页面上“看不见”或高度为 0。不是代码写错了，而是父容器实际高度为 0。
常见失效场景包括：
- 父元素仅设了
position: relative，但没设height、min-height，内部又全是position: absolute子项（无文档流内容撑高） - 父元素是 flex 容器，但
align-items: stretch被显式覆盖（如设了align-items: flex-start），导致其自身高度未被子项拉伸 - 父元素用
height: 100%，但它的父级高度仍是auto，形成“百分比链断裂” - 在 Vue/React SSR 渲染中，服务端未注入初始高度（如
min-height: 100vh），首屏渲染时父容器高度塌缩
想自适应高度又留上下边距，别硬拉 top/bottom
如果目标是“内容有多少高就占多少高，但上下各留 20px”，直接写 top: 20px; bottom: 20px; 是错的——它强制固定高度，不随内容变化，内容多了就会溢出或被裁掉。
正确做法分两种：
- 用
inset（现代写法）：inset: 20px auto 20px;+height: auto;，但注意兼容性（IE 全系不支持，旧版 Safari 行为不稳定） - 更通用方案：放弃
top/bottom拉伸，改用position: absolute配合transform或纯 margin/padding 布局；例如父容器设padding: 20px 0，子元素position: absolute; top: 0; left: 0; right: 0;并设height: auto
关键判断点：是否需要“严格贴顶贴底”？如果是，必须保证父容器高度可控；如果只是“视觉留白”，优先用 padding/margin。
拉伸后内容溢出却不滚动，这是最容易忽略的坑
top: 0; bottom: 0; 只管框体尺寸，不管内部是否可滚动。默认情况下，溢出内容会直接画在框外，尤其在 iOS WebView 或某些安卓浏览器中，表现为“空白区域”或“文字消失”。
必须显式控制溢出行为：
- 加
overflow-y: auto（推荐）或overflow: auto才能启用滚动条 - 仅设
overflow: hidden会裁剪，但用户无法看到被截断的内容 - 若内部是
display: flex，记得设flex-shrink: 0防止子项被压缩变形 - 长文本需配合
word-break: break-word和max-width: 100%，否则可能横向溢出破坏布局
真正让拉伸可用的，从来不是 top 和 bottom 这两个属性本身，而是你对父容器高度上下文的掌控力，以及对溢出、内容流、定位层级这些隐性依赖的持续校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
