如何让可滚动主内容与固定侧边栏并排而非显示在其下方？

核心问题分析 #

主内容显示在侧边栏下方，本质是未给两者设置横向布局规则，块级元素默认垂直排列，即便侧边栏设为sticky也无法改变排列方式。

具体修复方案 #

1. 用Flexbox实现横向并排 #

给侧边栏和主内容的父容器添加Flex布局，强制两者横向排列：

/* 侧边栏与主内容的父容器 */
.content-wrapper {
  display: flex;
  gap: 2rem; /* 可选：设置两者之间的间距 */
  padding: 0 1rem; /* 根据需求调整内边距 */
}

/* 侧边栏样式调整 */
.sidebar {
  position: sticky;
  top: 70px; /* 数值等于导航栏高度，确保固定在导航栏下方 */
  width: 280px; /* 固定侧边栏宽度 */
  height: fit-content; /* 让侧边栏高度自适应内容 */
}

/* 主内容自适应剩余空间 */
.main-content {
  flex: 1; /* 占据父容器剩余所有宽度 */
}

2. 处理层级冲突 #

如果导航栏同样是sticky定位，需设置z-index确保导航栏在侧边栏上方：

.navbar {
  position: sticky;
  top: 0;
  z-index: 100; /* 优先级高于侧边栏 */
}

.sidebar {
  z-index: 50;
}

3. 排查布局干扰项 #

• 确保父容器未设置overflow: hidden，该属性会导致sticky定位失效。
• 滚动隐藏logo横幅时，建议用transform: translateY(-100%)或height: 0; overflow: hidden，避免破坏正常布局流。

验证效果 #

调整后滚动页面：

• logo横幅正常隐藏
• 导航栏固定在顶部
• 侧边栏固定在导航栏下方，与主内容保持并排
• 主内容可独立滚动

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