如何高度自适应屏幕大小

常见的需求:上面一个搜索框，下面一个表格。如何让表格自适应高度，可以通过js计算，前面有过介绍。本文通过css来实现，更简单。

html:

<div class="mainBody">
        <div class="titleTab">
            <el-button :class="selectedPersonBtn?'primaryBtn':''" @click="personSetting">人员设置</el-button>
            <el-button :class="selectedPersonBtn?'':'primaryBtn'" @click="inspectOrgSetting">检验机构设置</el-button>
        </div>

    
        <div class="personDiv flexAutoHeight" v-if="selectedPersonBtn">
        </div>
</div>

css:

.mainBody{
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.flexAutoHeight{
    flex:1;
    height: auto;
}

利用flex布局的垂直方向，下面flex:1,height随便设个值。

如果是多层div,也可每层即用display:flex,又用flex:1的方法以来实现，自适应整页高度。