<p>最直接可控的方案是用display: grid实现三行两列布局，外层容器设grid-template-rows: 64px 1fr 48px和grid-template-columns: 240px 1fr，并配min-height: 100vh确保撑满视口；侧边栏需max-height: calc(100vh - 64px - 48px) + overflow-y: auto防塌缩，主内容区推荐height: calc(100vh - 64px - 48px) + overflow-y: auto，同时子项须加min-width: 0配合overflow: hidden处理长文本。</p>
display: grid 是目前最直接可控的方案，不用 float、position: absolute 或已废弃的 <frameset>，三行两列即可撑满视口并稳定分区。
用 grid-template-rows 和 grid-template-columns 定义主区
在最外层容器（比如 <body> 或 <div class="app">）上设置：
display: grid-
grid-template-rows: 64px 1fr 48px（顶部栏高 64px、主内容自适应、底部栏高 48px） -
grid-template-columns: 240px 1fr（侧边栏宽 240px、主内容区占剩余宽度） - 必须加
min-height: 100vh，否则内容少时底部会悬空
IE11 不支持 Grid？那就 fallback 到 display: flex; flex-direction: column，别硬加前缀或强塞兼容写法。
侧边栏必须独立控制滚动且不塌缩
常见错误是只设 overflow-y: auto，结果菜单项少时侧边栏高度塌成几像素——因为没限制最大高度。
立即学习“前端免费学习笔记（深入）”；
- 给侧边栏加
max-height: calc(100vh - 64px - 48px) - 同时设
overflow-y: auto，确保长菜单可滚、短菜单不缩 - 若菜单项含图标+文字，建议加
scrollbar-gutter: stable both-edges，防止滚动条出现时布局跳动
主内容区别用 overflow: scroll
写成 overflow: scroll 会导致滚动条永远显示，占空间又干扰视觉；写成 overflow: auto 却没配高度约束，Safari 下容易裁剪内容或触发 body 滚动。
- 推荐组合：
height: calc(100vh - 64px - 48px)+overflow-y: auto - 不要设
width，它由 Grid 自动分配；但需注意子元素含长文本时，要加min-width: 0配合overflow: hidden才能生效 - 避免在主内容区再套一层
position: fixed，会破坏 Grid 布局流
语义化结构比 class 命名更重要
别用 <div class="left-nav"> 这类无意义命名。HTML5 标准结构更利于可访问性、SEO 和后续 JS 控制：
- 顶部用
<header>，放 logo、用户头像、退出按钮 - 导航用
<nav>，不是<div> - 主内容用
<main>，不是<div class="content"> - 底部用
<footer>，哪怕只是占位
真正难的不是第一版能显示，而是加了表格组件、弹窗、图表后，它们是否还乖乖待在 <main> 里不溢出——这取决于你一开始有没有把 overflow、box-sizing、height 这三者的组合钉死。
