解决前端容器不能充满屏幕

解决前端容器不能充满屏幕

昨天刚学element-UI写管理系统的页面，发现当菜单栏都收缩起来，结果是这样的

红色框是容器里每个板块的布局，但是容器下面却有空白的地方没有撑满屏幕，怎么撑满屏幕呢？

可以利用css里的hight这个属性，让高去撑满。

我做了下面几种尝试：

1. style=“height:800px;”
2. style=“height:100%;”
3. style=“height:100vh;”

​ 第一种尝试是撑满了当前屏幕，但是是在我屏幕放大到100%的情况下，如果我把屏幕缩小到一定程度的时候，下面还是会空的。（因为px这种写法是写死的）

​ 第二种尝试没变化。

​ 第三种尝试撑满了当前屏幕，缩小也可以，所以实现了我的需求

然后我查了一下它们的区别

关于height:100%和height:100vh的区别

vh就是当前屏幕可见高度的1%，也就是说

height:100vh == height:100%;

但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，

但是设置height:100vh，该元素会被撑开屏幕高度一致。