Bootstrap 4 1个col X像素1个填充剩余页面

Question

我喜欢实现bootstrap或col中有两行，其中一行的内容例如：上一行70px。底部的填充剩余空间。

我做了一个小提琴：

body, html {
  padding: 0;
  margin: 0;
}

.row {
  background: red;
  margin-top: 20px;
  height: 100vh;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container-fluid p-0 m-0 bg-black">
  <div class="row no-gutters">
    <div class="col-12 align-self-top bg-primary">
      1 of 2
    </div>
    <div class="col-12 align-self-stretch bg-success">
      2 of 2
    </div>
  </div>
</div>

1之2具有内容的高度 2个中的2个应填充所有剩余空间。