最直接可控的方案是用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处理长文本。
display: grid 是目前最直接可控的方案，不用 float、position: absolute 或已废弃的 <frameset></frameset>，三行两列即可撑满视口并稳定分区。
用 grid-template-rows 和 grid-template-columns 定义主区
在最外层容器（比如 或 <div class="app">）上设置：<ul>
<li><code>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 控制：<ul>
<li>顶部用 <code><header></header>，放 logo、用户头像、退出按钮
<nav></nav>，不是 <div><li>主内容用 <code><main></main>，不是 <div class="content">
<li>底部用 <code><footer></footer>，哪怕只是占位真正难的不是第一版能显示，而是加了表格组件、弹窗、图表后，它们是否还乖乖待在 <main></main> 里不溢出——这取决于你一开始有没有把 overflow、box-sizing、height 这三者的组合钉死。
