使用 bootstrap 4 构建两列布局时，可通过为左侧栏添加 `position-fixed` 并配合合理的尺寸与定位控制，实现左栏静止、右栏垂直滚动的视觉效果。

在 Bootstrap 4 中，默认的栅格系统（如 col-md-3 和 col-md-9）基于文档流布局，因此仅靠 overflow-auto 或 vh-100 无法让某一列脱离滚动流——它们仍随父容器一起参与页面整体滚动。要实现“左栏固定、右栏独立滚动”，核心思路是将左栏脱离文档流，用 position: fixed 锁定其位置；同时为右栏预留对应空间，并设置可滚动区域。

✅ 正确做法如下：

1. 为左栏添加 position-fixed 类（Bootstrap 4 内置类），并显式指定 top、left、height 和 width，确保其精确定位且高度占满视口：

     @@##@@
     
   导航说明
     
   菜单标题
     
       首页
       关于
     
   

2. 为右栏设置 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 是简洁可靠的解法，配合精准的尺寸与间距控制，即可稳健实现“一栏固定、一栏滚动”的专业布局效果。