如何实现MUI DataGrid填充页眉页脚间剩余空间且不溢出？

要让MUI DataGrid自动填充页眉与固定页脚间的剩余空间，同时在行数过多时内部滚动，完全可以通过纯CSS布局实现，无需JS监听窗口resize计算高度，以下两种方案都能满足需求：

方案一：CSS Grid布局 #

利用Grid的grid-template-rows属性分配空间，让页眉、页脚自适应高度，中间区域自动填充剩余空间：

import { DataGrid } from '@mui/x-data-grid';

function App() {
  const rows = [/* 你的数据行 */];
  const columns = [/* 你的列定义 */];

  return (
    <div style={{
      display: 'grid',
      gridTemplateRows: 'auto 1fr auto',
      minHeight: '100vh',
      margin: 0,
      padding: 0,
      boxSizing: 'border-box'
    }}>
      {/* 页眉 */}
      <header style={{ padding: '1rem', backgroundColor: '#f5f5f5' }}>
        <h1>页面页眉</h1>
      </header>

      {/* DataGrid容器 */}
      <div style={{ overflow: 'hidden', padding: '0 1rem' }}>
        <DataGrid
          rows={rows}
          columns={columns}
          sx={{ height: '100%' }}
          pagination={false} // 禁用分页，让表格内部滚动
        />
      </div>

      {/* 固定页脚 */}
      <footer style={{ padding: '1rem', backgroundColor: '#f5f5f5' }}>
        <p>固定页脚</p>
      </footer>
    </div>
  );
}

原理 #

• gridTemplateRows: 'auto 1fr auto'：页眉和页脚根据内容自动调整高度，中间区域用1fr占满所有剩余空间
• 中间容器设置overflow: hidden，避免DataGrid内容溢出时撑破整体布局
• DataGrid通过height: 100%继承父容器高度，行数过多时自动在内部生成垂直滚动条

方案二：Flexbox布局 #

通过Flex的flex-grow属性让中间区域填充剩余空间，同样无需手动计算高度：

import { DataGrid } from '@mui/x-data-grid';

function App() {
  const rows = [/* 你的数据行 */];
  const columns = [/* 你的列定义 */];

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      minHeight: '100vh',
      margin: 0,
      padding: 0,
      boxSizing: 'border-box'
    }}>
      <header style={{ padding: '1rem', backgroundColor: '#f5f5f5' }}>
        <h1>页面页眉</h1>
      </header>

      <div style={{ flexGrow: 1, overflow: 'hidden', padding: '0 1rem' }}>
        <DataGrid
          rows={rows}
          columns={columns}
          sx={{ height: '100%' }}
          pagination={false}
        />
      </div>

      <footer style={{ padding: '1rem', backgroundColor: '#f5f5f5' }}>
        <p>固定页脚</p>
      </footer>
    </div>
  );
}

原理 #

• 整体容器设置flex-direction: column和minHeight: 100vh，确保占满视口高度
• 中间容器设置flexGrow: 1，自动填充页眉和页脚之外的剩余空间
• 同样通过overflow: hidden限制容器范围，DataGrid继承高度后内部处理滚动

关键注意点 #

1. 务必给整体容器设置minHeight: 100vh，否则布局无法撑满视口
2. 中间容器必须加overflow: hidden，防止DataGrid内容溢出时破坏页面布局
3. DataGrid不要设置固定height值，通过height: 100%继承父容器高度即可

内容的提问来源于stack exchange，提问作者Graham