开发pc端时，表格的高度怎么设置才能铺满页面

当前端开发pc 端页面时，做一个表格想铺满页面高度，这个时候表格的高度怎么设置有一些，是用视图高度减去页面其他内容高度好，还是固定一个高度好

结论先说

绝对不要用固定高度！

正确做法：用弹性布局（flex）让表格自动占满剩余高度

比「视图高度 - 其他高度」更稳、更通用、更适配。

javascript 复制代码

<!-- 父容器：占满全屏 -->
<div class="layout">
  <div class="header">头部/搜索栏（固定高）</div>
  <div class="table-container">表格（自动撑满）</div>
</div>

javascript 复制代码

/* 根布局：铺满屏幕高度 */
.layout {
  height: 100vh;    /* 占满屏幕高度 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  overflow: hidden;
}

/* 表格容器：自动占满剩余空间 */
.table-container {
  flex: 1;        /* 关键！自动占满剩余高度 */
  overflow: auto;  /* 内容多了内部滚动，不撑破页面 */
}

但用flex, 只能确认表格容器高度，比如我用了ui库，表格都是有属性 height 的，这个时候怎么设置呢

关键点一句话：

UI 库表格（Element / AntD）要写死 height / scroll.y，那就外层用 flex 撑出 "剩余高度"，内层把这个高度传给表格属性，不要用 100% 硬怼。下面分 Element UI 和 AntD 给你直接能用的方案。

Element UI（el-table）方案（最常见）

javascript 复制代码

<template>
  <div class="page-wrap">
    <!-- 顶部搜索/工具栏 -->
    <div class="search-bar">我是搜索栏</div>

    <!-- 表格容器：flex:1 -->
    <div class="table-wrap" ref="tableWrap">
      <el-table
        :data="tableData"
        :height="tableHeight"  <!-- 绑定算好的高度 -->
        stripe
        border
      >
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="age" label="年龄" />
      </el-table>
    </div>
  </div>
</template>

javascript 复制代码

.page-wrap {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
}

.search-bar {
  height: 60px; /* 固定 */
  margin-bottom: 16px;
}

.table-wrap {
  flex: 1; /* 自动占满剩余 */
  min-height: 0; /* 防止内容撑高 */
}

javascript 复制代码

export default {
  data() {
    return {
      tableData: [],
      tableHeight: 0
    }
  },
  mounted() {
    this.calcTableHeight()
    window.addEventListener('resize', this.calcTableHeight)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.calcTableHeight)
  },
  methods: {
    calcTableHeight() {
      // 取容器当前高度，赋给表格
      const wrap = this.$refs.tableWrap
      if (wrap) {
        this.tableHeight = wrap.clientHeight
      }
    }
  }
}

效果：

表格永远占满页面剩下的高度

表头固定、body 内部滚动

窗口大小变化自动适配