css 填满剩余高度

LOI_DawnKing-

已于 2022-09-13 23:44:52 修改

阅读量4.7k

点赞数

分类专栏：前端文章标签： css css3 html

于 2021-11-11 11:13:06 首次发布

本文链接：https://blog.csdn.net/loi_qer/article/details/121264053

版权

15 篇文章 0 订阅

订阅专栏

📅=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;
}

关注