用 display: grid 实现左右分栏最省心，需设 body { margin: 0; height: 100vh; display: grid; grid-template-columns: 240px 1fr; }，避免高度缺失和默认外边距导致布局异常。
用 display: grid 搭左右分栏最省心
现代浏览器下，display: grid 是最直接、最可控的方案。它不依赖 JS、不破坏文档流、响应式切换也干净——关键是要把高度和列轨道一次性钉死。
-
body或外层容器必须设height: 100vh，否则grid不知道“满屏”多高，右侧内容常被压扁或消失 -
grid-template-columns: 240px 1fr是后台最常用组合：左侧固定宽度防文字挤叠，右侧用1fr自适应，比百分比更稳（不受子元素 margin/padding 干扰） - 漏掉
margin: 0在body上？Chrome 默认有 8px 外边距，会导致整个布局右偏或底部留白 - 如果右侧要滚动，
.main { overflow-y: auto }必须加，且不能只靠height: 100%—— 它得继承自一个有明确高度的父级
fixed 侧边栏 top 值怎么算才不盖住 header
写 top: 0 是错的。它会叠在顶部导航栏上，导致菜单点不到、logo 被遮、用户头像看不见。真实值必须等于 .header 的 computed height。
- 打开浏览器开发者工具 → 选中 header 元素 → 看右侧面板的
Computed标签页 → 找height值（比如48px） - 必须同时设
bottom: 0，否则长菜单直接截断，下半部分永远点不到 - 如果 header 含
border或box-sizing: border-box，computed height 已含这些，别再额外加减 -
left: 0和width: 240px要配min-width: 200px，不然缩放窗口到 320px 宽时，文字全糊成一条线
为什么 flex 布局里左栏总被压缩变形
常见症状：图标错位、文字换行异常、鼠标 hover 区域变小——根本不是 CSS 写错了，是 flex-shrink 默认为 1 在偷偷起作用。
- 左栏别只写
width: 240px，要写flex: 0 0 240px（即不伸缩、不收缩、基础宽 240px） - 右栏用
flex: 1，别写flex: 1 1 auto——auto会让它根据内容宽度动态调整，反而破坏填满逻辑 - 父容器必须设
display: flex，漏这一句，所有 flex 属性都无效 - IE10–IE11 下
flex: 1有兼容问题，稳妥写法是flex: 1 1 0
iframe 嵌内容页为什么滚动失效或高度塌陷
iframe 看似方便，但实际埋了三类硬伤：高度不可控、跨域锁死、SEO 和可访问性归零。真要用，就得手动补全所有边界条件。
-
height必须显式设置，比如style="height: calc(100vh - 48px)"，否则默认只有 150px 高，内容大片空白 -
frameborder="0"是废弃属性，必须用 CSS 清除边框：iframe { border: none; } - 嵌自己写的
orders.html没问题；嵌第三方报表页？跨域后 JS 无法读取其 DOM，也就没法同步滚动、调整样式、监听加载完成 - 如果 iframe 内容本身有滚动条，而外层又没设
overflow: hidden，会出现双滚动条，尤其在 Safari 上表现混乱
真正卡住进度的，从来不是第一版布局能不能跑起来，而是加了表格组件、弹窗、ECharts 图表之后，它们是否还老老实实待在 <main></main> 区域里——这取决于你一开始有没有把 overflow、height、box-sizing 这三者的组合关系钉死，而不是靠试错去调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
