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










