React项目中Adaptable Grid自适应高度及固定头尾布局问题

1. 调整布局结构 #

给项目根容器设置垂直方向的全屏Flex布局，让三个组件按垂直顺序排列：

// App.jsx
import TopHeader from './TopHeader';
import AdaptableGrid from './AdaptableGrid';
import BottomHeader from './BottomHeader';
import './App.css';

function App() {
  return (
    <div className="app-container">
      <TopHeader />
      <div className="grid-wrapper">
        <AdaptableGrid />
      </div>
      <BottomHeader />
    </div>
  );
}

2. 核心CSS样式配置 #

通过Flex属性实现Header固定、Grid自适应剩余空间并滚动：

/* 重置全局边距，避免默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 根容器占满整个视口高度，垂直Flex布局 */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden; /* 禁止整体页面出现滚动条 */
}

/* 固定Header高度，防止被挤压 */
TopHeader, BottomHeader {
  flex-shrink: 0; /* 禁止Header收缩 */
}

/* Grid容器自动填充剩余空间，内容超出时显示滚动条 */
.grid-wrapper {
  flex: 1;
  overflow: auto; /* 仅Grid内容超出时触发滚动 */
}

3. 适配AdaptableGrid内部设置 #

确保AdaptableGrid继承父容器的高度，避免内部布局异常：

// AdaptableGrid.jsx
import { Adaptable } from '@adaptabletools/adaptable-react';

function AdaptableGrid() {
  const adaptableOptions = {
    // 其他配置项...
    layoutOptions: {
      height: '100%' // 让Grid占满父容器高度
    }
  };

  return (
    <Adaptable options={adaptableOptions}>
      {/* 你的Grid内容 */}
    </Adaptable>
  );
}

4. 响应式优化 #

Flex布局天然支持响应式，若需针对不同屏幕调整Header高度，可添加媒体查询：

@media (max-width: 768px) {
  TopHeader, BottomHeader {
    min-height: 60px; /* 小屏幕下设置Header最小高度 */
  }
}

以上方案可解决BottomHeader超出页面的问题，同时让AdaptableGrid自适应剩余视口空间，自带滚动条且完全支持响应式布局。

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