当页面内容高度动态变化时，使用 position: fixed 可使元素相对于浏览器视口（viewport）拉伸至 100% 高度，从而实现从顶部到底部的全高垂直线效果。
在网页布局中，常需添加一条贯穿整个可视区域的垂直分隔线（如居中分割左右内容）。但若直接对 <body> 子元素设置 height: 100%，往往失效——这是因为 100% 高度依赖于父容器的显式高度，而 <body> 默认采用“内容自适应”模式，其计算高度不等于视口高度。
此时，position: fixed 是更可靠的选择。它将元素脱离文档流，使其定位基准变为初始包含块（即视口），此时 height: 100% 指代的是视口高度（100vh），而非 <body> 的内容高度，因此能稳定覆盖从顶部（top: 0）到底部（bottom: 0 或 height: 100%）的整个区域。
以下是推荐的 CSS 实现：
.lines {
position: fixed;
top: 0;
right: 50%;
width: 20px;
height: 100%; /* 等效于 100vh，但语义更清晰 */
background-color: #000;
transform: translateX(50%); /* 补偿 right:50% 导致的偏移，实现真正居中 */
z-index: 1; /* 避免被后续内容遮挡 */
}✅ 关键优化说明： 添加 transform: translateX(50%) 可精准将线条中心对齐视口中央（否则 right: 50% 会使线条右边缘位于中线，造成视觉偏右）； 建议显式设置 z-index，确保线条始终显示在内容上方； 若需响应式适配，可配合 @media 调整宽度或隐藏（如移动端）。
HTML 结构保持简洁：
<body> <div class="lines"></div> <div class="div1"></div> <div class="div2"></div> </body>
⚠️ 注意事项：
- fixed 定位的元素会随滚动条固定在视口内，若需随页面滚动，请改用 position: sticky + top: 0 并包裹在有高度的容器中；
- 若页面存在横向滚动，right: 50% 在宽屏下可能偏移，建议结合 left: 50% 与 transform: translate(-50%, 0) 更稳健；
- 在 Safari 等旧版浏览器中，height: 100% 对 fixed 元素支持良好，但为兼容性考虑，也可写作 height: 100vh。
综上，利用 position: fixed 是实现“视口级全高线”的标准、高效且跨浏览器友好的方案。
