如何动态计算表格的max-height以适配浏览器高度？

要实现表格支持XY轴滚动，同时让max-height随浏览器高度动态变化、避免出现浏览器全局滚动条，有两种实用方案：

方案一：纯CSS快速实现 #

如果页面布局简单（比如只有固定高度的头部+表格区域），用视窗单位vh和calc就能搞定，无需编写JS：

无固定头部的情况 #

直接给表格容器设置基于视窗高度的max-height，预留部分空间给页面其他元素：

.table-wrap {
  max-height: 90vh; /* 留10vh给页面其他内容，可按需调整比例 */
  overflow-x: auto; /* 开启X轴滚动 */
  overflow-y: auto; /* 开启Y轴滚动 */
}

/* 强制表格不换行，保证X轴滚动生效 */
.table-wrap table {
  white-space: nowrap;
}

有固定高度头部的情况 #

如果页面顶部有固定高度的导航栏（比如80px高），用calc减去头部高度计算可用空间：

.header {
  height: 80px;
  position: sticky;
  top: 0;
}

.table-wrap {
  max-height: calc(100vh - 80px); /* 视窗高度减去头部高度 */
  overflow-x: auto;
  overflow-y: auto;
}

.table-wrap table {
  white-space: nowrap;
}

方案二：JavaScript动态计算（适配复杂布局） #

如果页面有多个可变高度的元素（比如头部高度不固定、有动态内容的侧边栏），用JS监听窗口尺寸变化，实时计算表格容器的可用高度：

HTML结构 #

<div class="header">动态高度的头部</div>
<div class="table-wrap">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

JS代码 #

// 计算并设置表格容器的max-height
function updateTableHeight() {
  const header = document.querySelector('.header');
  const tableWrap = document.querySelector('.table-wrap');
  const viewportHeight = window.innerHeight;
  const headerActualHeight = header.offsetHeight;
  // 预留20px的间距，避免内容贴边
  const availableHeight = viewportHeight - headerActualHeight - 20;
  tableWrap.style.maxHeight = `${availableHeight}px`;
}

// 页面加载时初始化一次
updateTableHeight();

// 监听窗口 resize 事件，实时更新高度
window.addEventListener('resize', updateTableHeight);

防抖优化（可选） #

窗口 resize 时会频繁触发计算，加个防抖减少性能消耗：

let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(updateTableHeight, 200); // 200ms延迟，可按需调整
});

配套基础CSS #

.table-wrap {
  overflow-x: auto;
  overflow-y: auto;
}

.table-wrap table {
  white-space: nowrap;
}

关键注意点 #

• 确保表格容器的父元素没有设置固定高度或overflow: hidden，否则会影响高度计算
• 如果表格有表头，可把表头设为sticky，滚动时表头固定，提升体验：

.table-wrap th {
  position: sticky;
  top: 0;
  background: #fff;
}

内容的提问来源于stack exchange，提问作者Duc Canh Bui