内容区滚动必须脱离body，设固定高度+overflow-y:auto，外层布局容器需height:100vh，顶部导航固定高60px并flex-shrink:0，侧边栏用flex:0 0 220px，内容区用flex:1+overflow-y:auto且内部不设height:100%。

内容区滚动必须脱离 body，否则侧边栏会跟着滚

浏览器默认滚动对象是 body，一旦主内容区内容超长，整个页面（含顶部导航、左侧菜单）都会被拖动。这不是“看起来不稳”，而是语义和交互层面的失效——用户无法固定查看菜单项的同时浏览数据。

核心解法：给内容容器设固定高度 + overflow-y: auto，且该容器不能是 body 的直接子元素。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 外层布局容器必须设 height: 100vh，否则内部 flex: 1 或 calc() 高度计算无基准
• 内容区元素（如 <main></main> 或 <div class="content">）需显式声明 <code>overflow-y: auto，不能依赖父级继承
• 避免在内容区内部再嵌套 position: fixed 元素——它会被裁剪或定位错乱，尤其在 Safari 中

用 flex 布局时，flex: 1 不等于“填满剩余空间”

flex: 1 只在父容器有明确高度（如 height: 100vh）且未被其他 flex 项撑开时才生效。后台常见错误是顶部没设固定高、侧边栏用了 min-width 而非 flex: 0 0 220px，导致内容区高度塌陷，overflow 失效。

• 顶部导航建议用固定 height: 60px，并加 flex-shrink: 0 防止压缩
• 侧边栏用 flex: 0 0 220px（不伸缩、不收缩、固定宽），不是 width: 220px
• 内容区用 flex: 1 + overflow-y: auto，且内部不要设 height: 100% —— 它会触发循环依赖

<table> 做布局时，<code>overflow 在 <td> 上基本无效<p>别信“给 <code><td> 加 <code>overflow: auto 就能滚动”的说法。表格单元格不是块级流容器，overflow 行为在各浏览器中不一致：Chrome 可能显示双滚动条，Safari 直接忽略，IE 则完全不渲染。

立即学习“前端免费学习笔记（深入）”；

• 若已有 <table> 结构，最快补救是把内容区 <code><td> 改成 <code><div class="scroll-wrapper">，再套一层 <code><div class="scroll-content"><li> <code>.scroll-wrapper 设 height: calc(100vh - 60px) + overflow-y: auto，且父 <tr> 和 <code><table> 必须同时设 <code>height: 100%
• 更稳方案：用 display: table 的 <div> 替代原生 <code><table>，既保留列宽控制，又能自由加 <code>overflow

  横向滚动时，固定头部/导航栏容易错位

  当内容区支持横向滚动（比如宽表格），position: sticky 或 fixed 的顶部栏宽度仍按视口（100vw）计算，而表格实际宽度可能达 2000px。结果就是滚动到右侧时，导航栏“断开”在左边。

  • 纯 CSS 方案几乎不可靠，width: max-content 在 sticky 元素上不生效
  • 必须用 JS 获取表格容器真实宽度：getComputedStyle(tableContainer).width，再赋给导航栏 style.width
  • 监听 resize 事件不够——列动态增删时也要重新同步，建议配合 MutationObserver 监听表格结构变化

  真正卡住滚动体验的，从来不是“怎么加滚动条”，而是谁负责高度计算、谁控制宽度边界、谁承担 overflow 的责任。这三个角色一旦错配，哪怕只差一个像素，滚动就会失焦、错位、卡顿。