vue 使用css根据不同屏幕大小调整高度占比

使用场景：我是在给定高度占比时，发现在大屏幕上是合适的，拖动回到小屏幕上，浏览器页面仍然保持在100%情况下，右侧会出现多个竖向滚动条。
结构如下：

image.png

回到小屏幕是状态如下：

image.png

解决办法：
vue 当前页面的css添加如下代码：

    /* 屏幕小于1400px */
@media screen and (max-width: 1400px)  {
    .tableBox{
        height: 80% !important;
    }
  .tableBox>div:nth-child(2){
    height: 80% !important;
  }
}
/* 屏幕大于1400px */
@media screen and (min-width:1401px) {
  .tableBox{
    height: 89% !important;
  }
}