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;
        }
    }