当页面内容高度动态变化时，使用 `position: fixed` 可使垂直线始终覆盖整个浏览器视口高度（而非仅父容器），无需依赖 body 的显式高度设置。
在构建响应式布局或中心对称设计时，常需一条从顶部到底部贯穿的垂直分隔线（例如居中分割左右内容区）。但若直接对元素设置 height: 100% 并配合 position: absolute，其高度将基于最近的定位祖先元素（如 body），而默认情况下 <body> 的高度由子内容撑开，并非视口高度——导致 .lines 仅覆盖初始可视区域，滚动后线条中断。
正确解法是改用 position: fixed：
.lines {
position: fixed; /* 脱离文档流，相对于视口定位 */
top: 0;
right: 50%; /* 水平居中（注意：需配合 transform 或 width 计算） */
width: 20px;
height: 100vh; /* 推荐：显式使用 100vh 确保覆盖整个视口高度 */
background-color: #000;
z-index: 1; /* 避免被后续内容遮挡 */
}✅ 关键要点：
- position: fixed 使元素以浏览器视口（viewport）为参考系，不受 body 内容高度影响；
- 使用 height: 100vh（而非 100%）更语义明确且兼容性稳定，确保始终等于视口高度；
- 若需精确居中（避免因 right: 50% + width: 20px 导致偏移），可优化为：
right: calc(50% - 10px); /* 向左微调半个宽度 */ /* 或更现代写法 */ left: 50%; transform: translateX(-50%);
⚠️ 注意事项：
- fixed 定位元素会脱离文档流，不影响其他元素布局，但需留意 z-index 层级，防止被遮盖；
- 在移动端 Safari 等浏览器中，100vh 可能受地址栏显示/隐藏影响，如需绝对稳定，可结合 JavaScript 动态设置（进阶场景）；
- 若页面存在横向滚动，fixed 元素默认会随滚动条固定在视口位置，符合多数垂直线需求。
综上，position: fixed + height: 100vh 是实现“全高垂直线”的简洁、可靠且语义清晰的标准方案。
