无需JavaScript或Flex实现剩余高度填充

当然可以不用JS实现，以下是几种纯CSS解决方案，适配不同场景：

方案1：CSS Grid布局（推荐，适配动态高度的顶部组件） #

这是最简洁的方案，无需改动太多原有结构，也不用关注顶部组件的具体高度：

/* 给包裹navbar和表格的根容器添加Grid布局 */
.page-wrapper {
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行自动适配顶部组件高度，第二行占满剩余空间 */
  min-height: 100vh; /* 确保容器占满整个视口高度 */
}

/* 顶部navbar等组件保持原有样式即可 */
.top-navbar {
  /* 你的原有样式：背景色、内边距、字体样式等 */
}

/* 表格容器设置溢出滚动 */
.table-container {
  overflow-y: auto; /* 表格内容超出容器高度时，显示垂直滚动条 */
  /* 可选美化样式 */
  padding: 1rem;
  border-top: 1px solid #eee;
}

原理：Grid的1fr单位会自动占据容器剩余的可用空间，完美适配顶部组件高度动态变化的场景。

方案2：绝对定位（兼容老旧浏览器场景） #

如果需要兼容不支持Grid的浏览器，可采用绝对定位方案：

/* 根容器设置相对定位，作为绝对定位的参考基准 */
.page-wrapper {
  position: relative;
  min-height: 100vh;
}

/* 顶部组件设置层级，确保在表格上方 */
.top-navbar {
  position: relative;
  z-index: 1;
  /* 你的原有样式 */
}

/* 表格容器绝对定位填充剩余空间 */
.table-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 用内边距让出顶部组件的空间，替换成你顶部组件的实际高度 */
  padding-top: 60px;
  overflow-y: auto;
}

方案3：calc计算高度（仅适用于顶部组件高度固定的场景） #

如果navbar等顶部组件高度是固定值（比如60px），直接用calc计算表格容器高度：

.table-container {
  height: calc(100vh - 60px); /* 视口高度减去顶部组件的固定高度 */
  overflow-y: auto; /* 溢出时显示滚动条 */
}

这个方法最简单，但仅适用于顶部组件高度固定不变的情况，若高度动态变化（比如响应式布局下navbar高度改变），会出现布局错乱。

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