如何让HTML页面主内容适配页眉与页脚之间的区域？

看起来你遇到的是典型的页面布局高度计算错误问题——主内容区没有预留页脚的高度，同时滚动容器的范围没有被正确限制在页眉和页脚之间的区域。下面是具体的解决方案：

1. 调整整体页面布局结构 #

首先确保页面是清晰的三段式结构：

<header class="page-header">导航栏内容</header>
<main class="main-content">
  <!-- 时间线表格容器 -->
  <table class="timeline-table">
    <thead>
      <!-- 表格表头内容 -->
    </thead>
    <tbody id="timeline">
      <!-- 你的表格行内容 -->
    </tbody>
  </table>
</main>
<footer class="page-footer">页脚内容</footer>

然后用CSS Flexbox实现占满视口的布局，让主内容区自动填充页眉和页脚之外的空间：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}
.page-header {
  flex-shrink: 0; /* 防止页眉被压缩 */
  /* 如果需要固定顶部可添加：position: sticky; top: 0; z-index: 100; */
}
.main-content {
  flex: 1; /* 自动填充页眉和页脚之间的剩余空间 */
  overflow-y: auto; /* 仅在主内容区显示垂直滚动条 */
  padding: 0 1rem; /* 可选，避免内容贴边 */
}
.page-footer {
  flex-shrink: 0; /* 防止页脚被压缩 */
  /* 如果需要固定底部可添加：position: sticky; bottom: 0; z-index: 100; */
  background-color: #fff; /* 添加背景色避免内容透过页脚显示 */
}

这样设置后，主内容区的滚动条会被限制在页眉和页脚之间，不会延伸到页脚下方，同时页脚会始终占据底部空间，主内容不会覆盖它。

2. 优化表格tbody的滚动（若需单独滚动tbody） #

如果需要表头固定、tbody单独滚动，还需对表格做额外设置，保证表头和表体列对齐：

.timeline-table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  height: 100%; /* 继承主内容区高度 */
}
.timeline-table thead {
  display: table;
  width: 100%;
  table-layout: fixed; /* 固定列宽，避免表头表体列错位 */
}
.timeline-table tbody {
  display: block;
  height: calc(100% - 45px); /* 减去表头实际高度，需根据你的表头调整数值 */
  overflow-y: auto;
  width: 100%;
  table-layout: fixed;
}
.timeline-table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

table-layout: fixed 是保证列对齐的关键，它会让表格列宽均匀分配，避免表头和表体出现宽度不一致的情况。

3. 排查现有样式冲突 #

检查你tbody行内的position: relative和z-index设置，如果页脚使用了固定定位，需确保页脚的z-index高于主内容区，防止滚动时内容覆盖页脚：

.page-footer {
  z-index: 50;
}

经过以上调整，你的时间线表格就会在页眉和页脚之间的区域正常滚动，底部的表格行不会被页脚遮挡，滚动条也只会出现在主内容区内。

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