如何仅使用CSS创建“重复垂直线”

Question

我正在通过建立一个网站进行练习，我想为整个页面创建5条垂直线。我已经编码了一条垂直线，但是它不会到达页面的底部。我该如何解决？

我

.vlines {
  position: absolute;
  top: -20vh;
  left: 0;
  z-index: -1;
  display: flex;
  width: 100%;
  height: 100%;
  opacity: 0.18;

  &__column {
    border-left: 1px solid #888;
    flex: 1;
    height: 110%;
  }
}

我希望输出从最顶部到达页面底部，但是这些行仅到达页面的一部分。我有9个部分

Answer 1

我找到了答案。您可以忽略上面的代码。谢谢！

body{
background: linear-gradient(90deg, #eee 1px, transparent 1%) 1px 0, #fff;
background-size: 200px 1px;
}