通过 CSS 的 vh 单位与 overflow-y: auto 结合，可使容器 div 精确占据视口 100% 高度，并在内容溢出时显示内部垂直滚动条，避免页面整体滚动，适配各类屏幕尺寸。
通过 css 的 `vh` 单位与 `overflow-y: auto` 结合，可使容器 div 精确占据视口 100% 高度，并在内容溢出时显示内部垂直滚动条，避免页面整体滚动，适配各类屏幕尺寸。
要实现一个自适应视口高度、内含长表格、且仅容器自身可滚动的布局，关键在于脱离传统固定像素（如 height: 500px）或依赖父元素高度（如 height: 100%）的限制，转而使用基于视口的相对单位。
✅ 正确方案：使用 vh + overflow-y
.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指“视口高度的 100%”，即浏览器窗口可视区域高度，天然响应式，无需媒体查询适配不同设备；- 若页面顶部有固定导航栏（如
position: fixed; height: 60px），应改用calc(100vh - 60px)防止容器遮挡或溢出；- 确保
和无默认 margin 或意外height: 100%干扰（推荐重置）：html, body { margin: 0; padding: 0; height: 100%; }
❌ 常见误区排除
-
height: 100%无效：它依赖父元素显式定义高度，而/默认无高度约束，链式继承会失效； -
min-height: 100vh不适用：它允许容器撑高，无法强制截断并触发内部滚动； - JavaScript 动态计算高度不必要：现代 CSS 已完全支持声明式响应式高度控制。
✅ 进阶优化（可选）
若需兼容旧版 Safari（vh 的渲染异常，可结合 JS 回退：
if (/iP(hone|ad)/.test(navigator.userAgent)) {
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
}
并在 CSS 中使用 height: calc(var(--vh, 1vh) * 100); ——但绝大多数现代项目中，纯 CSS 100vh 已足够可靠。
综上，100vh + overflow-y: auto 是简洁、高效、跨设备兼容的标准解法，兼顾语义清晰性与维护性，是响应式表格容器滚动的首选实践。
