左侧用 position: fixed 并设 top/left/height: 100vh，右侧用 margin-left 避让并加 overflow-y: auto 实现滚动；需配合媒体查询在移动端收起侧栏，避免遮挡导航栏或高度计算错误导致滚动失效。
用 position: fixed 固定左侧，右侧用 margin-left 避开
bootstrap 本身不提供“左侧固定 + 右侧滚动”的内置类，得靠 css 手动控制。核心思路是：让左侧区域脱离文档流（position: fixed），右侧区域通过 margin-left 留出空间，再加 overflow-y: auto 实现滚动。
常见错误是直接给左侧加 fixed 却忘了右侧没避让，结果右侧内容被遮盖；或者用了 col-* 栅格但 fixed 后栅格失效，布局错乱。
- 左侧容器必须设
top、left、height: 100vh（不能只用100%，否则高度塌陷） - 右侧容器的
margin-left值要严格等于左侧宽度（比如250px），不能依赖col-2这类响应式类自动计算 - 如果用 Bootstrap 5，注意
.container默认带max-width，右侧滚动区可能被截断，建议改用.container-fluid或手动设width: 100vw
避免 fixed 左侧遮挡 Bootstrap 导航栏或页脚
当页面有顶部导航栏（如 .navbar）或底部固定元素时，fixed 左侧默认从视口左上角开始，会和它们重叠。这不是 bug，是 fixed 的正常行为，但容易被忽略。
解决方法不是调 z-index，而是调整定位偏移：
- 左侧加
top: 56px（对应 Bootstrap 5 默认.navbar高度） - 如果用了
.navbar-expand-*，确保在小屏下也适配——可配合@media调整top值 - 右侧滚动区若需撑满剩余高度（比如表格/列表需要填满视口），要用
calc(100vh - 56px)，而不是100vh
响应式断点下如何让左侧“收起”而非强行固定
移动端屏幕窄，硬塞一个固定宽度的左侧栏体验极差。Bootstrap 的断点（sm、md）在这里不是摆设，得主动用媒体查询切换布局模式。
别指望 col-sm-2 + fixed 自动适配——fixed 会让它永远显示且不响应栅格规则。
- 在
@media (max-width: 768px)下，把左侧position改回static，并设display: none - 右侧取消
margin-left，恢复为完整宽度（width: 100%） - 用 Bootstrap 的
offcanvas组件替代固定侧栏更稳妥：左侧内容放进<div class="offcanvas">，触发按钮放在顶部导航里，逻辑清晰、无障碍友好
overflow-y: auto 在右侧不生效？检查这几个地方
右侧设了 overflow-y: auto 却没滚动条，大概率是高度没被约束住，浏览器不知道“多高才算溢出”。这和 Bootstrap 的 flex 容器、.row 的 min-height 行为有关。
典型现象：滚动条一闪而过、右侧内容全挤在顶部、或整个页面纵向滚动而非仅右侧。
- 右侧容器必须有明确高度限制，例如
height: calc(100vh - 56px)或max-height: calc(100vh - 56px) - 如果父级是
.row，它默认min-height: 1px，无法撑起子元素高度，建议外层套个div并设display: flex; flex-direction: column - 避免在右侧内部用
.table-responsive套嵌——它自带overflow-x，可能干扰y方向滚动
真正麻烦的是高度计算链：navbar 高度、fixed 左侧 top 偏移、是否含 footer、是否启用 Bootstrap 的 spacing 工具类（比如 mt-5 会额外增加 margin）。这些值一旦不一致，滚动就失灵。动手前先用浏览器开发者工具盯紧 computed height 和 overflow 属性。
