css 填满剩余高度

📅=2022.9.13 更新
很多情况下没有填满屏幕是因为外层 body, html, #app 没有 100%，检查一下吧！

如图所示，这两块均是活动的，而且下面的一大块还有滚动条，上面候选区域会随着js逻辑变高，那么我怎么让这俩加起来正好是一个页面的高度呢？

思路是，设置整个的高度为 95vh，为什么不是100？为了下面美观一点留点空间。这样外面的大框就是铺满页面的，然后上方的候选区域没法指定高度，因为是随着用户的操作变化的，只能设置下面的高度，设置一个最小高度，一个最大高度即可。

css 如下：
整体：

.half {
  width: 50%;
  margin: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: hidden;
  height: 95vh;
}

下方区域：

.sub-nav {
  width: 100%;
  min-height: 250px;
  max-height: 95vh;
  overflow-y: auto;
  margin-top: 20px;
}