html - 使用 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(to right, black 1px, transparent 1px);
  background-size: 200px;
}