当页面内容高度动态变化时，使用 `position: fixed` 可使垂直线始终覆盖整个浏览器视口高度（而非仅父容器），无需依赖 body 的显式高度设置。

在构建响应式布局或中心对称设计时，常需一条从顶部到底部贯穿的垂直分隔线（例如居中分割左右内容区）。但若直接对元素设置 height: 100% 并配合 position: absolute，其高度将基于最近的定位祖先元素（如 body），而默认情况下

的高度由子内容撑开，并非视口高度——导致 .lines 仅覆盖初始可视区域，滚动后线条中断。

正确解法是改用 position: fixed：

.lines {
  position: fixed;    /* 脱离文档流，相对于视口定位 */
  top: 0;
  right: 50%;         /* 水平居中（注意：需配合 transform 或 width 计算） */
  width: 20px;
  height: 100vh;      /* 推荐：显式使用 100vh 确保覆盖整个视口高度 */
  background-color: #000;
  z-index: 1;         /* 避免被后续内容遮挡 */
}

✅ 关键要点：

CDP浏览器大师

CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

• 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 是实现“全高垂直线”的简洁、可靠且语义清晰的标准方案。