用 display: grid 划分顶部/侧边/主内容三区最稳，推荐 grid-template-rows: 64px 1fr 48px、grid-template-columns: 240px 1fr，并配 min-height: 100vh 防底部悬空；侧边栏需设 overflow-y: auto 和 max-height: calc(100vh - 64px - 48px)，主内容区用 overflow: auto 而非 scroll，小屏响应式宜用 transform 位移隐藏侧边栏。
用 display: grid 划分顶部/侧边/主内容三区最稳
管理控制台页面结构固定、区域职责明确，display: grid 是目前最直接可控的方案。别再用 float 或嵌套 position: absolute 拼凑——它们会让后续加搜索框、导出按钮或暗色模式时反复推翻重写。
推荐在最外层容器（比如 或一个 <div class="app">）上定义：<pre class="brush:php;toolbar:false;">grid-template-rows: 64px 1fr 48px;
grid-template-columns: 240px 1fr;</pre><p>对应：顶部栏高 64px、侧边栏宽 240px、主内容区自适应、底部栏高 48px。注意必须配 <code>min-height: 100vh，否则内容少时底部会悬空。
- IE11 不支持 Grid？那就 fallback 到
display: flex; flex-direction: column，别硬加前缀 - 侧边栏需要滚动但不希望影响整体高度？给它单独设
overflow-y: auto; max-height: calc(100vh - 64px - 48px) - 顶部栏里放 logo + 用户头像 + 退出按钮，用
display: flex; justify-content: space-between; align-items: center就够了
position: fixed 做侧边栏时必须锁死四个方向
很多人写 position: fixed; top: 64px; left: 0;，结果一滚动就发现侧边栏下面留白、或者被顶部栏遮住一半——问题出在没管 bottom 和 width。
立即学习“前端免费学习笔记（深入）”；
正确写法要显式约束四边：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
.sidebar {
position: fixed;
top: 64px;
left: 0;
bottom: 48px;
width: 240px;
overflow-y: auto;
}- 漏掉
bottom，浏览器默认按auto算高度，内容少时侧边栏就塌缩 - 不设
width，某些旧版 Chrome 会按内容撑开，破坏与主内容区的对齐 - 如果侧边栏菜单项很多，记得加
scrollbar-gutter: stable both-edges防止滚动条出现时布局偏移
主内容区用 overflow: auto 而不是 scroll
常见错误是给主内容容器写 overflow: scroll，导致无论内容多长，滚动条永远显示——既占空间又干扰视觉。
overflow: auto 才是合理选择：只在内容溢出时才出现滚动条。但要注意两个坑：
- 父容器没设明确高度（比如没继承
100vh或没配合grid-row: 2 / -1），auto就会失效，变成完全不滚动 - 里面嵌了
flex或grid子容器，得确保子容器也设了min-height: 0，否则长文本会把父容器撑爆，滚动依旧不触发 - 若内容区含表格，记得加
table-layout: fixed和word-break: break-word，防止单元格无限拉宽
响应式断点下侧边栏收起逻辑不能只靠 display: none
小屏设备（如 iPad 竖屏）想隐藏侧边栏、让主内容全宽显示？别直接 display: none ——这会导致 DOM 节点突然消失，菜单状态丢失、焦点跳失、动画卡顿。
更稳妥的做法是用位移+视觉隐藏组合：
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
transition: transform 0.2s ease;
}
.sidebar.active {
transform: translateX(0);
}
}- 用
transform而非left，避免触发重排（reflow） - 加
transition后，配合 JS 切换.active类就能实现平滑呼出 - 千万别忘了给
.sidebar加will-change: transform，尤其在低端安卓机上能减少闪烁
真正难的不是怎么画出三块区域，而是当用户缩放页面到 125%、开着系统高对比度模式、又连着 4K 外接屏时，侧边栏是否还钉在左上角、滚动是否依然顺滑、文字会不会被截断——这些细节没被测试过，布局就算不上“可用”。
