当页面内容高度动态变化时，使用 position: fixed 可使垂直线元素相对于视口（viewport）拉伸为 100% 高度，避免因 body 高度不确定导致的截断问题。
在网页布局中，若想实现一条从顶部贯穿到底部的垂直分隔线（例如居中分割左右区域），常会尝试用 height: 100% 配合 position: absolute。但问题在于：height: 100% 是相对于其定位上下文（即最近的已定位祖先）的高度计算的；而 <body> 默认高度由内容撑开，并非固定值，因此 100% 往往只匹配初始视口高度，滚动后线条就会“短一截”。
✅ 正确解法是改用 position: fixed：
- fixed 定位使元素脱离文档流，直接相对于浏览器视口（viewport）定位；
- 此时 height: 100% 表示“占满整个可视窗口高度”，且不受页面滚动影响；
- 结合 top: 0 和 right: 50%（或 left: 50%），可精准实现居中垂线效果。
以下是优化后的完整 CSS 示例：
.lines {
position: fixed;
top: 0;
right: 50%; /* 居中：设 right 50% 后需配合 transform 或负 margin 修正自身宽度 */
width: 20px;
height: 100vh; /* 推荐使用 100vh 替代 100%，更语义明确且兼容性一致 */
background-color: #000;
transform: translateX(50%); /* 关键：将右边缘对齐视口中心，避免因 width 导致偏移 */
z-index: 1000; /* 确保不被其他内容遮挡 */
}⚠️ 注意事项：
- 若使用 right: 50% + width: 20px，元素右边界会落在视口正中心，导致线条整体偏左 10px；添加 transform: translateX(50%) 可精准居中；
- 更推荐写法：left: 50%; transform: translateX(-50%)，语义更直观；
- height: 100vh 比 height: 100% 更可靠，因它始终等于视口高度（Viewport Height），不依赖父容器渲染状态；
- 若需支持滚动时仍覆盖全部内容（包括超出视口部分），fixed 是唯一稳妥方案；absolute 在长页面中必然失效。
总结：面对动态高度页面中的“全高线”需求，放弃依赖 body 高度的思路，转而采用 position: fixed + 100vh（或 100% 配合正确定位上下文），即可实现稳定、响应式、跨设备可用的垂直分隔效果。
