vue element-ui分页插件 始终保持在页面底部样式

最近在写前端页面的时候，有一个小需求就是保证分页插件一直保持在底部，表单数据增多的时候出现竖向的滚动条。

直接上代码

    <el-card class="footer" v-if="total > 0">
      <!-- 分页插件 -->
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.queryParams.pageNum"
          :page-sizes="[10, 20, 30]"
          :page-size="this.queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>



return {
queryParams: {
        pageNum: 1,
        pageSize: 10,
}
}

methods:{
 handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.getList(val);
    },
}

样式

.footer {
  z-index: 500;
  position: fixed;
  bottom: 0;
  width: 100%;
  line-height: var(--footer-height);
  color: #fff;
}

效果展示