Css 使用引导行容器和列将列颜色扩展到页面底部

我似乎无法将引导列的颜色扩展到页面底部。我不想设置固定的高度，我希望它延伸到浏览器屏幕的底部

HTML:

框1
我需要蓝色延伸到页面底部
框2
CSS:
.box1{
背景色：浅绿色；
}

JS小提琴在这里：

---

您可以使用

min-vh-100

（最小高度：100vh；）类进行此操作

框1我需要蓝色延伸到页面底部
框2

<div class="container">
  <div class="row">
    <div class="col box1">
      Box1
      I need the blue to extend to bottom of page
    </div>
    <div class="col">
      Box2
    </div>
  </div>
</div>

CSS:
.box1 {
  background-color: aqua;
}