javascript - 重复一个元素直到它覆盖整个屏幕

Question

我想要重复一个 html/css 元素，直到它覆盖整个屏幕。

如何重复并只停在屏幕高度，而不是永远重复？

#container{
 height: 100vh;
 width: 100vw;
}
.dotts{
 background-color: yellow;
 border-radius: 50%;
 height: 20px;
 width: 20px;
}

function repeat(){
 $("#repeating").append($(".dotts:first").clone());
}

Answer 1

使用 height()

function repeat() {
  $("#repeating").append($(".dotts:first").clone());
}

let fill = Math.floor($(window).height() / $('.dotts:first').height())
for (let i = 1; i < fill; i++) {
  repeat()
}

#container {
  height: 100vh;
  width: 100vw;
}

.dotts {
  background-color: yellow;
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="repeating">
  <div class="dotts"></div>
</div>