左右固定栏+中间内容区各自滚动需用flex布局：根元素设height:100%，主容器display:flex+flex-direction:column+min-height:100vh，头部flex:0 0 48px，内容区flex:1并嵌套三栏，左右栏flex:0 0 240px+overflow-y:auto，中间栏flex:1+overflow-y:auto+min-height:100%，且须全局box-sizing:border-box。
左右固定栏 + 中间内容区各自滚动，怎么写
直接给每个栏加 overflow-y: scroll 不行——父容器没高度约束，子元素滚动会失效或错位。核心是：三栏必须脱离文档流干扰，且各自拥有明确的可滚动区域边界。
推荐用 display: flex 搭配 min-height: 100vh 和 calc() 高度计算：
- 根元素
html、body设height: 100%，避免继承塌陷 - 主容器设
display: flex; flex-direction: column; min-height: 100vh - 头部固定高（如
48px），用flex: 0 0 48px - 内容区设
flex: 1; display: flex;，再分三栏 - 左栏/右栏用
flex: 0 0 240px+overflow-y: auto - 中间栏用
flex: 1; overflow-y: auto，并确保内部有足够高度（如min-height: 100%）
为什么 sticky 左侧栏 + 可滚动中间区容易互相遮挡
常见错误是把 position: sticky 和 overflow-y: scroll 套在同一层容器上——sticky 的锚点依赖父容器的滚动上下文，而中间栏自己滚动时，左侧栏的 sticky 行为就失效了。
解法是分层隔离：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 左侧栏单独包裹一层
<aside class="nav">，外层设position: sticky; top: 0; height: calc(100vh - 48px) - 中间内容区用独立
<main>，不和左侧共享滚动容器 - 绝对不要在同一个
div上同时设position: sticky和overflow-y: scroll - 如果用了
display: grid，注意grid-template-rows必须显式定义，否则1fr在空内容时不会撑高，导致 sticky 失效
Grid 实现三栏独立滚动时 gap 和 padding 怎么配合
gap 是安全的，但一旦给某栏加了 padding，又没设 box-sizing: border-box，就会挤占可用空间，导致中间栏宽度不足、滚动条被遮或换行。
关键控制点：
- 全局加
* { box-sizing: border-box; }，否则width: 240px+padding: 12px= 实际占宽 264px - 用
gap: 12px控制栏间距，别用margin—— margin 会破坏1fr的剩余空间分配逻辑 - 如果右侧栏要固定宽度且带内边距，写成：
.right { width: 240px; padding: 16px; }，而不是靠 margin 推开 - 滚动容器内部若含文字或图片，加
min-width: 0防止内容强行撑宽（尤其flex: 1栏）
IE11 兼容下怎么让三栏滚动正常
IE11 不支持 gap、不识别 1fr、flex: 1 行为也不一致，硬套现代写法会直接错位或无法滚动。
降级方案要点：
- 用
display: -ms-flexbox替代display: flex，并手动补全前缀 - 中间栏不用
flex: 1，改用-ms-flex: 1+ 显式设width: 0 - 替代
gap：用-ms-grid-column-gap和-ms-grid-row-gap - 滚动容器必须设
height（不能只靠min-height），IE 对calc(100vh - 48px)支持不稳定，建议用 JS 动态设高或 fallback 到固定像素值
真正麻烦的不是写出来，而是改需求时——比如“右侧栏要随内容高度自适应，但不超过视口”，这时 max-height 和 overflow 的组合就得重新校验所有浏览器行为，尤其是 Safari 对 sticky 和 scrollbar-gutter 的处理还存在差异。
