html - 获取垂直线以沿着页面向下运行

Question

我的页面中间有一条垂直线，但它只延伸到第一部分。当您一直向下滚动时，我想要它做的是一直运行到页面的末尾。我不确定如何实现这一目标。现在我的线路的 CSS 是这样的:

.line{
    position: absolute;
    top: 100px;
    margin: auto;
    width: 50%;
    height: 100%;
    border-right: 1px dotted black;
  }

我不想设置高度，因为当我开始向站点添加更多元素时，我希望线条随页面增长而不必每次都更改高度。

这是一个代码笔:https://codepen.io/Furr/pen/gJLapb

这个网站是我的灵感来源，我希望它是这样的:https://www.rezo-zero.com/projects/

提前致谢。

Answer 1

我认为您实际上可能想要这样的 3 个 div。 (该行是一个div)

.vl {
  border-left: 1px dotted black;
  height: 500px;
}

#parent {
  display: flex;
}
#right {
  width: 300px;
      margin-left: 5px;

}
#left {
  flex: 1;
}

<div id="parent">
  <div id="left">Left Side</div>
  <div class="vl"></div>
  <div id="right">Right Side</div>
</div>

拥有 3 个 div 的另一个原因是您可以像在您的示例中一样“分解”带有可点击内容的行