如何实现AG Grid动态适配屏幕高度，避免留白与Footer覆盖？

你的核心问题是用媒体查询硬编码高度百分比，无法动态适配Header和Footer之外的剩余空间，导致不同屏幕下要么留白要么覆盖Footer。以下是两种更可靠的解决方案：

方案1：使用calc()结合视口高度（固定Header/Footer高度时适用） #

通过CSS的calc()直接计算网格可用高度，减去Header和Footer的固定高度，无需媒体查询：

首先定义全局变量存储Header和Footer的高度（替换为你实际的高度值）：

:root {
  --header-height: 60px;
  --footer-height: 40px;
}

然后设置网格容器的高度：

.grid {
  height: calc(100vh - var(--header-height) - var(--footer-height));
  overflow: auto; /* 当网格内容超出高度时自动显示滚动条 */
}

方案2：Flexbox布局（适配动态/固定高度的Header/Footer） #

用Flex布局让页面容器自动分配空间，网格会自动填满Header和Footer之间的剩余区域：

HTML结构示例 #

<div class="page-wrapper">
  <header class="page-header">你的Header内容</header>
  <div class="grid">AG Grid容器</div>
  <footer class="page-footer">你的Footer内容</footer>
</div>

CSS样式 #

/* 重置默认边距，确保页面容器占满整个视口 */
body {
  margin: 0;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 容器高度至少占满视口 */
}

/* 固定Header和Footer的高度，不被压缩 */
.page-header, .page-footer {
  flex-shrink: 0;
}

/* 网格容器自动占满剩余空间 */
.grid {
  flex: 1;
  overflow: auto; /* 内容过多时滚动 */
}

为什么这两种方案更好？ #

• 媒体查询是基于宽度区间硬编码百分比，无法应对Header/Footer高度变化、不同屏幕的实际可用空间差异；
• calc()和Flex布局都是动态计算剩余空间，适配所有屏幕尺寸，无需针对不同宽度区间写冗余规则；
• Flex方案还能兼容Header/Footer高度动态变化的场景（比如响应式Header折叠/展开）。

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