通过 CSS Flex 布局与 height: 100vh、overflow-y: auto 结合固定定位，可使主内容区自适应剩余视口高度，无论屏幕尺寸如何变化，均能保持三栏（侧边栏+顶部栏+主内容区）静态布局，并在内容超长时仅在主内容区内部出现滚动条。
通过 css flex 布局与 `height: 100vh`、`overflow-y: auto` 结合固定定位，可使主内容区自适应剩余视口高度，无论屏幕尺寸如何变化，均能保持三栏（侧边栏+顶部栏+主内容区）静态布局，并在内容超长时仅在主内容区内部出现滚动条。
要实现一个响应式、跨设备一致的全屏三段式布局（左侧固定导航栏 + 顶部固定页眉 + 中间自适应主内容区），关键在于：脱离常规文档流约束，用固定定位（position: fixed）锚定侧边栏和页眉，再通过 calc() 和 overflow-y: auto 精确控制主内容区的可用空间与滚动行为。
以下为推荐的纯 CSS 实现方案（兼容现代浏览器，无需 JavaScript）：
<!-- 固定左侧导航栏 -->
<nav class="fixed left-0 top-0 h-screen w-48 bg-gray-800 text-white z-20 border-r border-gray-700">
navbar sticking to the left...
</nav><!-- 主内容区域（含页眉 + 可滚动主体） --><div class="ml-48 flex flex-col h-screen">
<!-- 固定页眉（sticky 优于 fixed，更易维护层级） -->
<header class="sticky top-0 z-10 h-20 bg-white border-b border-gray-200 flex items-center px-6 shadow-sm"><h1 class="text-xl font-semibold">Page Heading</h1>
</header><!-- 主内容区：占据剩余全部高度，内容溢出时显示垂直滚动条 --><main class="flex-1 overflow-y-auto bg-gray-50 p-4"><ul class="space-y-2">
<li class="bg-white p-3 rounded shadow-sm">Item 1</li>
<li class="bg-white p-3 rounded shadow-sm">Item 2</li>
<li class="bg-white p-3 rounded shadow-sm">Item 3</li>
<!-- ...更多列表项 -->
</ul></main>
</div>
✅ 核心要点解析：
- nav 使用 fixed 定位确保始终贴左满高，z-20 保证层级高于其他元素；
- 主容器 div.ml-48 的 ml-48（即 margin-left: 12rem）预留导航栏宽度，避免内容被遮挡；
- header 使用 sticky（而非 fixed）更语义化，且天然随滚动保持在顶部，无需手动计算 top；
- main 设置 flex-1 + overflow-y-auto，使其自动填充父容器剩余高度（flex-col 下的 flex-1 行为等效于 height: 0; min-height: 100%），当子内容超出时仅在此区域内触发滚动；
- 全局 body.overflow-hidden 防止页面级滚动条干扰布局。
⚠️ 注意事项：
- 不要对 main 设置 height: 100% 或 max-height（如 680px），这会破坏响应性；应完全依赖 Flex 的弹性分配；
- 若使用 Tailwind CSS，请确保已启用 scrollbar 相关插件或自定义样式美化滚动条；
- 在移动端需额外添加 viewport meta 标签 保障正确缩放；
- 如需支持 IE11，建议改用 position: absolute + 显式 height: calc(100vh - 5rem)（5rem ≈ header 高度），但会牺牲部分灵活性。
该方案彻底规避了硬编码像素值，真正实现「一劳永逸」的视口适配——无论 13 英寸笔记本还是 32 英寸显示器，布局结构恒定，滚动行为可控，是构建管理后台、仪表盘等垂直场景 UI 的最佳实践之一。
