通过 CSS 的 vh 单位与 overflow-y: auto 结合，可让 div 精确占据用户视口高度，并在内容溢出时仅在容器内显示垂直滚动条，避免页面整体滚动。
通过 css 的 `vh` 单位与 `overflow-y: auto` 结合，可让 div 精确占据用户视口高度，并在内容溢出时仅在容器内显示垂直滚动条，避免页面整体滚动。
要实现一个自适应视口高度的容器 div（即始终占满当前浏览器可视区域高度），同时在其内部渲染长表格并仅在该 div 内出现垂直滚动条（而非拉动整个页面），关键在于脱离传统 height: 100% 的继承陷阱，转而使用基于视口的绝对单位。
✅ 正确做法：使用 vh 单位 + 显式滚动控制
height: 100% 在多数情况下失效，是因为它依赖父元素高度——而 和 默认无显式高度，导致链式继承中断。更可靠、响应式的方式是直接使用视口单位：
.container {
height: 100vh; /* 占满整个视口高度 */
overflow-y: auto; /* 内容超限时显示垂直滚动条 */
overflow-x: hidden; /* 可选：隐藏横向溢出 */
box-sizing: border-box; /* 确保 padding/border 不撑大高度 */
}配合 HTML 结构：
<div class="container">
<table>
<thead><tr><th>序号</th><th>姓名</th><th>邮箱</th></tr></thead>
<tbody>
<!-- 大量数据行，例如 200+ 行 -->
<tr><td>1</td><td>张三</td><td>zhang@example.com</td></tr>
<!-- ... -->
</tbody>
</table>
</div>⚠️ 注意事项：
100vh包含整个视口（包括地址栏等），在移动端 Safari 中可能因地址栏缩放导致高度抖动；如需更稳健体验，可改用100dvh（动态视口高度，现代浏览器支持良好）。- 若容器有上下 padding/margin 或 border，请务必设置
box-sizing: border-box，否则实际高度会超出100vh，触发意外滚动。- 表格本身无需额外样式，但建议为
<tbody> 设置 <code>display: block; max-height: calc(100vh - [thead高度]); overflow-y: auto—— 不推荐此做法，因会破坏表格语义与可访问性；优先保持原生<table> 结构，由外层 <code>.container承担滚动职责。- 避免对
或设置height: 100%来“修复”百分比高度——这既不可靠又易引发兼容性问题。✅ 进阶优化（可选）
对于需要兼容老浏览器或精细化控制的场景，可结合 CSS 自定义属性与媒体查询：
.container { height: clamp(400px, 100dvh, 800px); /* 最小/理想/最大高度 */ overflow-y: auto; }或使用 JavaScript 动态适配（仅在必要时）：
function updateContainerHeight() { document.querySelector('.container').style.height = `${window.innerHeight}px`; } window.addEventListener('resize', updateContainerHeight); updateContainerHeight(); // 初始化但绝大多数场景下，纯 CSS 的
100dvh+overflow-y: auto已足够简洁、高效且响应式——无论用户使用折叠屏手机、iPad 还是 4K 显示器，容器始终精准贴合其当前可视区域，滚动行为完全封装于组件内部，真正实现「所见即所得」的用户体验。
