要件：Element UIのテーブルが一行のみまたはデータがない場合でも、ページネーションは常に最下部に表示され、ヘッダーは固定され、中間のコンテンツ高さは画面サイズに応じて自動調整されるようにする

1. 高さを動的に計算する

2. 高さ100% + calc関数を使用して適応させる

ここでは2番目の方法について説明します

<div class="container bg-light">
    <div class="header-section">
        <el-button type="success" size="small" @click="handleAdd">負のリストを登録</el-button>
    </div>
    <div class="table-container">
        <el-table
            :data="tableRows"
            class="main-table"
            ref="dataTable"
            border
            fit
            :header-row-style="{height:'38px'}"
            style="width:100%;"
            height="100%">
                <el-table-column prop="index" label="番号" width="80"></el-table-column>
                <el-table-column prop="orgName" label="機関"></el-table-column>
                <el-table-column prop="description" label="負のリストの説明"></el-table-column>
                <el-table-column prop="creator" label="登録者"></el-table-column>
                <el-table-column prop="registerDate" label="登録日時">
                    <template slot-scope="scope">
                        <p v-if="scope.row.registerDate != null">{{scope.row.registerDate | 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="handleEdit(scope.row)"></i>
                       <i class="el-icon-delete" @click="handleDelete(scope.row)"></i>
                    </template>
                </el-table-column>
        </el-table>
    </div>
    <div class="pagination-section">
        <el-pagination
            class="pagination-wrapper"
            :page-size="searchCriteria.limit"
            :page-sizes="[10, 20, 50, 100]"
            @size-change="handleChangeSize"
            @current-change="changePage"
            layout="total, sizes, prev, pager, next, jumper"
            :current-page.sync="currentPage"
            :total="totalCount">
        </el-pagination>
    </div>
</div>

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