如何使溢出表格在父div内显示，仅表格区域可滚动？

要实现页面头部、页脚等元素固定，仅表格区域可滚动，解决表格溢出和页脚丢失的问题，可以通过CSS固定定位和滚动容器来实现，具体步骤如下：

核心思路 #

1. 将头部、页脚设置为固定定位，锁定在视口的顶部和底部
2. 为表格所在的容器设置合适的高度范围，并开启垂直滚动，让表格内容在容器内滚动，不影响其他元素

代码实现 #

假设页面的HTML结构如下：

<header class="page-header">页面头部内容</header>
<div class="table-wrapper">
  <table class="data-table">
    <!-- 表格内容 -->
  </table>
</div>
<footer class="page-footer">页面页脚内容</footer>

对应的CSS样式：

/* 固定头部在视口顶部 */
.page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px; /* 根据实际头部高度调整 */
  background-color: #ffffff; /* 设置背景色避免内容穿透 */
  z-index: 100; /* 确保头部在最上层 */
}

/* 固定页脚在视口底部 */
.page-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px; /* 根据实际页脚高度调整 */
  background-color: #ffffff;
  z-index: 100;
}

/* 表格容器：填充头部和页脚之间的空间，开启滚动 */
.table-wrapper {
  margin-top: 60px; /* 与头部高度一致，避免内容被头部遮挡 */
  margin-bottom: 40px; /* 与页脚高度一致，避免内容被页脚遮挡 */
  max-height: calc(100vh - 60px - 40px); /* 视口高度减去头部和页脚的总高度 */
  overflow-y: auto; /* 垂直方向内容溢出时显示滚动条 */
  padding: 0 10px; /* 可选：添加内边距优化视觉 */
}

/* 表格宽度自适应 */
.data-table {
  width: 100%;
  border-collapse: collapse; /* 可选：合并表格边框 */
}

/* 可选：处理表格横向溢出 */
@media screen and (max-width: 768px) {
  .table-wrapper {
    overflow-x: auto; /* 横向内容溢出时显示滚动条 */
  }
  .data-table {
    min-width: 800px; /* 设置表格最小宽度，确保列内容完整 */
  }
}

关键说明 #

• 固定定位的元素必须设置背景色，防止下方的表格内容透过显示
• 使用calc(100vh - 头部高度 - 页脚高度)动态计算容器高度，确保容器刚好填充头部和页脚之间的可视区域
• overflow-y: auto会在表格内容超过容器高度时自动显示滚动条，表格内容仅在容器内滚动，不会溢出到父元素或挤压页脚
• 针对小屏幕设备，添加横向滚动可以避免表格列被挤压变形

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