element表格上下固定，内容高度自适应

 

需求：element的表格内容只有一行或者没有数据时候，分页也始终在最底部，头部固定，中间内容高度随不同屏幕自适应

1、动态计算高度

2、设置高度100% + calc进行适配

这里先说下第二种方式

 

<div class="content sm-bg">
            <div class="same-head">
                <el-button type="success" size="mini" @click="hadnleAdd">登记负面清单</el-button>
            </div>
            <div class="same-table">
                <el-table
                    :data="tableData"
                    class="oneTabel"
                    ref="table"
                    border
                    fit
                    :header-row-style="{height:'38px'}"
                    style="width:100%;"
                    height="100%">
                        <el-table-column prop="orderNum" label="序号" width="80"></el-table-column>
                        <el-table-column prop="name" label="机构"></el-table-column>
                        <el-table-column prop="negativeDec" label="负面清单描述"></el-table-column>
                        <el-table-column prop="createUserCaption" label="登记人"></el-table-column>
                        <el-table-column prop="bulletinTime" label="登记时间">
                            <template slot-scope="scope">
                                <p v-if="scope.row.bulletinTime!= null">{{scope.row.bulletinTime | formatDate}}</p>
                                <p v-else></p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120" fixed="right">
                            <template slot-scope="scope">
                               <i class="el-icon-edit"  @click="handleUpdate(scope.row)"></i>
                               <i class="el-icon-delete" @click="handleDel(scope.row)"></i>
                            </template>
                        </el-table-column>
                </el-table>
            </div>
            <div class="pag_title">
                <el-pagination
                    class="page_pub"
                    :page-size="querySearch.size"
                    :page-sizes="[10, 20, 50, 100]"
                    @size-change="handleSizeChange"
                    @current-change="tablePageChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="page"
                    :total="totals">
                </el-pagination>
            </div>
        </div>

　　

   .content {
        height: 80%;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        flex-direction: column;
        position: relative;
        .same-table{
            height: calc(100% - 55px);
            position: relative;
        }
        .pag_title{
            position: fixed;
            bottom: 27px;
            width: 80%;
            text-align: center;
        }
    }