即使表主体发生更改，也要使其适应页面

Question

我想动态更改tbody的大小。始终应占用其空间的100％，如下图所示。

如果可能的话，我想为我的Vue.js SPA实现这一目标。这些选项卡来自BootstrapVue。

编辑：

我知道有很多与此问题有关的主题。他们总是使用定义的高度。

这是我的桌子的CSS。它具有固定的大小，但是可以很好地在我的屏幕上显示，但是在我的笔记本电脑上却不能（例如1920x1080分辨率）

/*Table scrolling*/
th, td
{ 
    min-width : 200px;
    max-width: 200px; 

    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

#fixSizeOfTable
{
    width: 100%;
    overflow: auto;
}

#soinsTable tbody{
    width:100%;
    display:block;
    overflow:auto;    

    height: 500px;
}

#soinsTable thead tr{
    display:block;
}

#soinsContainer
{
    height : 100%;
}

.vue文件中的html

<div id="fixSizeOfTable">
        <table id="soinsTable">
            <thead>
                <tr>
                    //multiple <th>s'
                </tr>
            </thead>
            <tbody>
                <tr v-for="soin in soins" :key="soin.id">
                    // multiple <td>s'

                    <!--Buttons-->
                    <td>
                        //Buttons
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

编辑2：

在em / rem中使用高度是否可以解决这个问题？

编辑3：

将高度设置为100％（而不是定义的高度（500px））会使tbody超出页面高度，并且不使用overflow：出于某种原因自动使用