MUI Grid高度控制与自定义滚动条实现指南

import React from 'react';
import { Grid } from '@mui/material'; // 假设你在这里使用MUI Grid

const ExampleLayout = () => {
  return (
    // 最外层容器，通常会设置其高度，例如：height: '100vh' 或 '100%'
    <div style={{ display: 'flex', width: '100%', height: '100vh', flexDirection: 'column' }}>
      {/* 头部或顶部区域（可选） */}
      <div style={{ height: '64px', background: '#f0f0f0', padding: '10px' }}>
        Header Content
      </div>

      {/* 
        MUI Grid的包装容器
        - display: 'flex'：使其成为一个Flex容器
        - flex: '1 1 0%'：核心属性，让此容器在主轴方向（此处为垂直方向，因为父级flexDirection: 'column'）上填充剩余空间
          - flex-grow: 1：允许容器增长以占据可用空间
          - flex-shrink: 1：允许容器缩小以适应空间不足
          - flex-basis: 0%：定义了在分配剩余空间之前元素的初始主轴尺寸。设置为0%表示元素在分配空间前不占据任何空间，所有空间都将根据flex-grow分配。
        - overflow: 'auto'：当内容超出此容器的高度时，自动显示垂直滚动条
      */}
      <div style={{ display: 'flex', flex: '1 1 0%', overflow: 'auto' }}>
        {/* 在这里放置你的MUI Grid组件 */}
        <Grid container style={{ width: '100%' }}>
          {/* 示例内容，模拟大量内容以触发滚动条 */}
          {Array.from({ length: 50 }).map((_, index) => (
            <Grid item xs={12} key={index} style={{ padding: '10px', borderBottom: '1px solid #eee' }}>
              Grid Item {index + 1} - This is some content that will eventually cause scrolling.
            </Grid>
          ))}
        </Grid>
      </div>

      {/* 底部或页脚区域（可选） */}
      <div style={{ height: '48px', background: '#e0e0e0', padding: '10px' }}>
        Footer Content
      </div>
    </div>
  );
};

export default ExampleLayout;

/* App.css 或你的样式文件 */
.page-wrapper {
  display: flex;
  width: 100%;
  height: 100vh; /* 确保页面容器有明确高度 */
  flex-direction: column; /* 如果是垂直布局 */
}

.header-div {
  height: 64px;
  background: #f0f0f0;
  padding: 10px;
}

.grid-wrapping-div {
  display: flex;
  flex: 1 1 0%; /* 核心属性，使其填充剩余空间 */
  overflow: auto; /* 溢出时显示滚动条 */
}

.footer-div {
  height: 48px;
  background: #e0e0e0;
  padding: 10px;
}

import React from 'react';
import { Grid } from '@mui/material';
import './App.css'; // 导入你的CSS文件

const ExampleLayoutWithCss = () => {
  return (
    <div className="page-wrapper">
      <div className="header-div">
        Header Content
      </div>
      <div className="grid-wrapping-div">
        <Grid container style={{ width: '100%' }}>
          {/* 示例内容 */}
          {Array.from({ length: 50 }).map((_, index) => (
            <Grid item xs={12} key={index} style={{ padding: '10px', borderBottom: '1px solid #eee' }}>
              Grid Item {index + 1} - This is some content that will eventually cause scrolling.
            </Grid>
          ))}
        </Grid>
      </div>
      <div className="footer-div">
        Footer Content
      </div>
    </div>
  );
};

export default ExampleLayoutWithCss;