WordPress中基于页面高度而非视口高度绘制左侧垂直线

• 基于WordPress搭建的网站，页面包含多个全屏宽度div，需在页面左侧绘制一条垂直线：
  • 距离顶部300px、距离左侧100px
  • 线条需延伸至页面底部（而非视口高度）
• 初始思路：在页面顶部添加div，通过CSS定位并让div高度匹配页面总高度，但遇到难题：
  • 纯CSS无法实现div高度匹配页面总高度
  • 尝试用JavaScript获取scrollHeight设置高度也未成功

CSS #

.static {
     float: left;
     overflow: hidden;
     position: absolute;
     flex-direction: column;
     left: 100px;
     top: 300px;
     min-height: 100vh;
     height: auto;
     border-left: 1px solid green; 
}

HTML #

<div class="static" id="line"></div>

因WordPress主题限制无法将页面div包裹在其他容器中，采用固定定位全屏线条+绝对定位遮挡盒的视觉欺骗方案：

• 固定定位的全屏垂直线作为底层
• 同背景色的绝对定位遮挡盒覆盖线条顶部区域，滚动时遮挡盒随页面移动，营造出线条从指定位置开始延伸至页面底部的效果

实现代码 #

CSS #

/* 遮挡盒：覆盖线条顶部不需要的部分 */
.box {
  float: left;
  overflow: hidden;
  position: absolute;
  left: 0px;
  height: 300px; /* 对应线条开始位置的顶部距离 */
  width: 100px; /* 覆盖到线条的左侧位置 */
  background-color: black; /* 与页面背景色一致 */
  z-index: 2;
}

/* 全屏固定垂直线 */
.line {
  float: left;
  overflow: hidden;
  position: fixed;
  flex-direction: column;
  left: 100px; /* 需求中的左侧距离 */
  top: 0px;
  min-height: 100%;
  height: auto;
  z-index: 1;
  border-left: 1px solid red;
}

/* 页面其他内容层级需高于遮挡盒，避免被遮挡 */
.page-divs {
  z-index: 3;
}

HTML #

<div class="line"></div>
<div class="box"></div>

内容的提问来源于stack exchange，提问作者Pipo