使用 bootstrap 4 构建两列布局时，可通过为左侧栏添加 `position-fixed` 并配合合理的尺寸与定位控制，实现左栏静止、右栏垂直滚动的视觉效果。
在 Bootstrap 4 中，默认的栅格系统（如 col-md-3 和 col-md-9）基于文档流布局，因此仅靠 overflow-auto 或 vh-100 无法让某一列脱离滚动流——它们仍随父容器一起参与页面整体滚动。要实现“左栏固定、右栏独立滚动”，核心思路是将左栏脱离文档流，用 position: fixed 锁定其位置；同时为右栏预留对应空间，并设置可滚动区域。
✅ 正确做法如下：
-
为左栏添加 position-fixed 类（Bootstrap 4 内置类），并显式指定 top、left、height 和 width，确保其精确定位且高度占满视口：
-
为右栏设置 margin-left（值 = 左栏宽度），避免内容被固定左栏遮挡，并启用内部滚动：
主内容区
此处内容可自由滚动，不受左栏影响。
区块 1区块 2区块 3
⚠️ 注意事项：
- position-fixed 元素会脱离文档流，因此必须手动为右栏设置 margin-left（或使用 ms-* 工具类）腾出空间；
- 避免在 .row 内直接对子列使用 position-fixed 后仍依赖 col-* 的宽度计算——建议用 width 或 max-width 显式控制固定栏宽度；
- 若需响应式适配（如移动端隐藏左栏），可结合 d-none d-md-block 控制显示，并为右栏移除 margin-left；
- vh-100 在固定定位中有效，但需确保父级无 transform、perspective 等触发新层叠上下文的属性，否则可能影响 fixed 行为。
? 总结：overflow-auto 失效的根本原因在于未将左栏脱离文档流。Bootstrap 的 position-fixed 是简洁可靠的解法，配合精准的尺寸与间距控制，即可稳健实现“一栏固定、一栏滚动”的专业布局效果。
