如何使用Bootstrap实现侧边栏布局固定不跟随页面滚动？

你之前的实现存在两个问题：

1. CSS语法错误：你写的样式中bottom: 0,使用了逗号作为分隔，不符合CSS语法规范，会导致后续的width属性失效
2. 固定定位元素脱离文档流：侧边栏设置position: fixed后不再占据文档流空间，右侧的主内容会自动移动到页面最左侧，被侧边栏遮挡

正确实现步骤 #

1. 修正侧边栏样式 #

#accordionSidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 150px;
  max-height: 100vh;
  overflow-y: auto; /* 侧边栏内容超出视口高度时，内部可滚动 */
  z-index: 999; /* 避免侧边栏被其他页面元素覆盖 */
}

2. 给主内容区域添加左侧边距 #

给侧边栏右侧的主内容容器添加等于侧边栏宽度的左边距，避免内容被遮挡：

/* 示例：假设你的主内容容器类名为main-content，可替换为你实际的类名/id */
.main-content {
  margin-left: 150px;
  /* 可选：配合控制主内容宽度，避免横向溢出 */
  width: calc(100% - 150px);
}

附加说明 #

如果你使用的是SB Admin 2这类常见的后台模板，本身已经内置了固定侧边栏的工具类，直接给侧边栏元素添加fixed-left类即可实现效果，无需手动编写上述样式。
如果需要做移动端适配，可添加媒体查询，在小屏幕下调整侧边栏宽度、改为自动收起，同步调整主内容的左边距即可。

内容的提问来源于stack exchange，提问作者aoiTenshi