fixed侧边栏需对齐头部computed高度并设bottom:0，内容区用calc(100vh-头部高度)配合overflow-y:auto，侧边栏加min-width保障可点击性，必须使用header/nav/main语义化结构。
fixed侧边栏必须对齐头部高度，否则会盖住导航
常见错误是写 position: fixed; top: 0;，结果菜单直接压在头部下面，用户点不到logo或退出按钮。真实高度得看 .pg-header 的 computed height——浏览器开发者工具里右键「检查」→「Computed」标签页下拉到底，找「height」值。如果头部用了 box-sizing: border-box 或含 padding，这个值可能不是你写的 48px，而是 52.6px 这种带小数的数。
正确做法是：top 必须等于那个 computed height，且 bottom: 0 不可省略。漏掉 bottom: 0 会导致侧边栏在长页面中被截断，尤其在移动端预览时根本看不到底部菜单项。
内容区必须用 calc(100vh - 头部高度)，不能只靠 overflow:auto
只给 .content 加 overflow-y: auto 是无效的——它没高度，滚动条出不来；加了 height: 100vh 又会和头部重叠，触发双滚动条（body 一个、content 一个），Safari 上尤其明显。
可靠写法只有这一种：height: calc(100vh - 48px); overflow-y: auto;。注意：48px 得跟你实际头部高度一致，不能硬写死，否则换一套主题就崩。如果头部高度动态变化（比如响应式折叠后变矮），就得用 JS 动态更新这个 calc 值，或者改用 flex 布局替代 fixed。
立即学习“前端免费学习笔记（深入）”；
侧边栏宽度要设 min-width，百分比在小屏上会失效
width: 20% 在手机上缩成 75px，图标挤成一条线，文字全看不见。这不是视觉问题，是功能失效——用户根本没法点击二级菜单。
必须加约束：width: 20%; min-width: 200px;。200px 是底线，能放下常见图标 + 两字中文 + 一点留白。响应式收缩时，别动 width，只改 min-width：@media (max-width: 768px) { .menu { min-width: 60px; } }，这样图标保留，文字收起，结构不塌。
语义化标签不是装饰，header/main/nav 漏一个都影响可访问性
满屏 <div class="header"> 看着能跑，但屏幕阅读器识别不出导航区域，盲人用户无法用快捷键跳转到菜单；搜索引擎也难判断哪块是正文主体，SEO 权重分散。
基础结构必须包含：<header>（顶部导航）、<nav>（左侧菜单）、<main>（主内容区）、<footer>（页脚）。不要嵌套错：<nav> 应该在 <header> 内部放顶部导航，在 <aside> 或独立 <nav> 里放侧边栏；<main> 里不能再套 <section> 当内容容器——那是语义越界。
真正卡住项目进度的，往往不是写不出功能，而是布局一嵌表格或弹窗就撑破 content 区、一加 iframe 就出现双滚动条、一换设备就侧边栏消失——这些全是早期没钉死 overflow、box-sizing 和 height 三者组合关系导致的。
