Бесконечные вертикальные линии на веб-странице

Question

У меня есть четыре вертикальные линии на веб-странице, которые я хочу сделать бесконечными (высота бесконечна) при прокрутке вниз.

span {
  position: absolute;
  display: block;
  top: 0;
  height: 100%;
  width: 1px;
  background-color:rgba(0, 0, 0, 0.1);
}
.firstOverlayLine { left: 15%; }
.secondOverlayLine { left: 40%; }
.thirdOverlayLine { left: 60%; }
.fourthOverlayLine { left: 85%; }

<!-- VERTICAL BG LINES -->
    <span class="firstOverlayLine"></span>
    <span class="secondOverlayLine"></span>
    <span class="thirdOverlayLine"></span>
    <span class="fourthOverlayLine"></span>

На этом этапе, если вы добавите контент, который будет идти вниз на странице и вам нужно прокрутить строки, остановится. Я хочу, чтобы строки имели высоту всей страницы независимо от объема добавляемого контента.

Первое изображение

Второе изображение

Спасибо!