通过为表格容器设置最大高度和滚动属性，可使宽高超限的表格在固定区域内实现内部滚动，避免内容溢出并保持页脚等元素始终可见。
通过为表格容器设置最大高度和滚动属性，可使宽高超限的表格在固定区域内实现内部滚动，避免内容溢出并保持页脚等元素始终可见。
当网页中嵌入动态生成的表格（如 Reddit 数据统计页）时，表格尺寸可能随数据量剧烈变化：小数据集渲染正常，而大数据集极易导致表格高度失控，撑开父容器、遮挡页脚，甚至迫使整个页面纵向滚动，严重影响用户体验与布局稳定性。
解决该问题的核心思路是将滚动行为约束在表格所在容器内部，而非作用于整个页面。推荐做法是为包裹表格的 <div>（例如类名为 <code>.table-div）应用以下 CSS 规则：
.table-div {
max-height: calc(100vh - 300px);
overflow: auto; /* 推荐使用 auto 而非 scroll，仅在需要时显示滚动条 */
overscroll-behavior: contain; /* 可选：防止滚动到底部时触发父容器/页面滚动（iOS/Chrome 支持良好） */
}
其中 100vh - 300px 是示例值，实际应根据页面固定结构精确计算：
✅ 建议动态测量顶部区域（如 .select-div、.search-div）与底部页脚（.footer）的高度之和，再用 100vh 减去该总和，确保表格区域高度自适应；
✅ 若需兼容旧版浏览器，可用 JavaScript 在加载后计算并注入内联样式，或使用 CSS 自定义属性（--header-height, --footer-height）提升可维护性。
此外，为增强可访问性与视觉一致性，还可补充：
- 设置
overflow-x: auto单独控制水平滚动（应对宽表格）； - 添加
scrollbar-width: thin（Firefox）和::-webkit-scrollbar样式优化滚动条外观； - 确保表格本身不设置
width: 100%或table-layout: fixed导致意外拉伸——优先由容器控制尺寸。
最终效果：无论表格含 10 行或 1000 行，其容器高度恒定，用户仅在该区域内上下/左右滑动查看数据，页眉、搜索栏与页脚始终锚定可视区域，页面整体布局坚如磐石。
