纯HTML+CSS后台布局的关键在于height、overflow、box-sizing的精准组合：fixed侧边栏top须等于header实际computed高度；内容区需height:calc(100vh-xxpx)+overflow-y:auto；width缩放必配min-width；表单必须声明method和action属性。
纯 HTML + CSS 就能搭出可用的后台布局，但真正卡住进度的从来不是“怎么写”，而是“为什么写了却错位、滚动失效、小屏崩塌”。
fixed 侧边栏 top 值必须等于 header 实际高度
常见错误是写 position: fixed; left: 0; top: 0;，结果侧边栏盖住顶部导航。这不是浏览器 bug，是你没预留空间。
- 用浏览器开发者工具看
.pg-header的 computed height，比如是48px，那侧边栏的top就必须设为48px - 如果 header 含
padding或用了box-sizing: border-box，height和clientHeight可能不一致，只信 computed 值 - 别写死
top: 50px—— 换个字体或 padding 就失效
内容区必须显式设 height + overflow-y: auto
只写 overflow: auto 在内容区，滚动大概率失效，尤其在 Safari 上直接裁剪内容；写 height: 100vh 又会撑高页面、触发双滚动条。
- 推荐组合：
height: calc(100vh - 48px); overflow-y: auto;（48px 对应 header 高度） -
overflow: auto不能加在body或html上，否则侧边栏会跟着滚 ——fixed失去意义 - 若内容区嵌了
table或canvas，它们可能溢出容器，需额外加max-width: 100%或overflow-x: auto
width 缩放必须配 min-width，不能只靠百分比
width: 20% 在手机上缩成 60px，文字全糊成一团，图标都点不准 —— 这不是响应式，是自毁式布局。
立即学习“前端免费学习笔记（深入）”；
- 侧边栏至少设
min-width: 200px保文字可读；小屏时用媒体查询收缩：@media (max-width: 768px) { .sidebar { min-width: 60px; } } - 用
flex-basis替代width时，同样要配min-width，否则 flex 自动压缩照样崩 - 图标收起模式下，
title属性或 tooltip 要补上，否则用户根本不知道那个小图标是干啥的
表单提交失败常因 action 或 method 缺失
点登录按钮没反应、页面闪一下就白屏、控制台报 404 —— 八成是 <form> 少写了关键属性，不是 JS 没写对。
-
<form method="POST" action="/login">是最低可用配置；开发阶段action可暂设为真实路径，别用#或空字符串 -
<button type="submit">才触发原生校验（如required），用type="button"+ onclick 就得自己写所有校验逻辑 - 移动端软键盘按“前往”会绕过 focus 和 placeholder 提示，直接提交 —— 所以必做空值校验，不能只靠 HTML5 属性
布局稳定性的核心不在“多炫的动画”或“多复杂的嵌套”，而在 height、overflow、box-sizing 这三者的组合是否被钉死。加一个弹窗、嵌一张 ECharts 图表、塞进一个带横向滚动的表格 —— 真正考验你一开始有没有把边界条件写进 CSS 里。
