纯HTML+CSS可搭后台骨架，但需严控布局边界：fixed侧边栏top须等于头部实际高度（如48px）、必设bottom:0；内容区用height:calc(100vh-48px);overflow-y:auto；侧边栏width配min-width:200px保可读性。
纯 HTML + CSS 就能搭出可用的后台管理系统骨架，但关键不是“能不能”，而是“怎么避免一加交互就错位、一换屏幕就崩、一嵌内容就滚动失效”。真正在意效率的人，会从布局模型开始卡死边界条件。
用 position: fixed 做侧边栏时，top 和 left 必须对齐头部高度
常见错误是只写 position: fixed; left: 0; top: 0;，结果侧边栏盖住头部导航。实际必须预留顶部空间：
-
top值必须等于.pg-header的实际高度（比如48px），不能靠猜或写死50px -
bottom: 0是必须项，否则侧边栏在长页面里会截断 - 如果头部用了
box-sizing: border-box或含padding，要重新量真实高度，浏览器开发者工具里看 computed height 最准
overflow: auto 不加在内容区，滚动就会失效或错位
当主内容区高度超出视口，且侧边栏是 fixed 时，内容区必须显式设置 overflow: auto，否则：
- 内容被裁剪不可见（尤其在 Safari 上更明显）
- 滚动条出现在整个
body上，导致侧边栏跟着动（违背 fixed 本意） - 若同时设了
height: 100vh，反而会撑高页面，触发双滚动条
推荐写法：height: calc(100vh - 48px); overflow-y: auto;，比单纯 overflow: auto 更稳。
立即学习“前端免费学习笔记（深入）”；
响应式下侧边栏宽度不能只靠百分比，min-width 是保命线
用 width: 20% 在小屏上会缩到看不见文字，直接废掉导航。必须加约束：
-
width: 20%; min-width: 200px;是底线，200px 是可读图标+文字的最小安全宽度 - 如果用
flex布局替代fixed，flex-basis同样要配min-width - 媒体查询里改
min-width比改width更可靠，例如@media (max-width: 768px) { .menu { min-width: 60px; } }，只收图标，不崩结构
真正难的不是写出第一版布局，而是当加了表格、弹窗、图表组件后，它们是否还乖乖待在 content 区里不溢出——这取决于你一开始有没有把 overflow、box-sizing、height 这三者的组合关系钉死。
