Flexbox布局：左侧窗口滚动+右侧粘性适配Sticky Header

要实现左侧内容随窗口滚动、右侧粘性定位且适配顶部固定Header的Flex布局，核心是让左侧内容自然撑开页面触发窗口滚动，同时通过position: sticky实现右侧的粘性效果，具体修改如下：

核心思路 #

• 移除左侧容器的overflow: auto和固定高度设置，让内容自然延伸触发窗口滚动
• 右侧容器使用position: sticky，并设置top值与Header高度一致，避免被顶部固定Header遮挡
• 给右侧容器添加align-self: flex-start，确保粘性定位基于视口而非flex容器的拉伸高度

修改后的代码示例 #

CSS 代码 #

/* 顶部固定Header */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Flex主容器 */
.flex-container {
  display: flex;
  gap: 24px;
  padding: 20px;
}

/* 左侧内容区 */
.left-content {
  flex: 1;
  /* 移除原有的height和overflow:auto，让内容自然撑开 */
}

/* 右侧粘性侧边栏 */
.right-sidebar {
  position: sticky;
  top: 60px; /* 与Header高度匹配，避免被遮挡 */
  align-self: flex-start; /* 关键：让粘性定位生效 */
  width: 320px;
  background: #f5f5f5;
  padding: 16px;
  border-radius: 8px;
}

/* 示例内容样式 */
.left-content p {
  margin-bottom: 16px;
  line-height: 1.6;
}

HTML 结构 #

<header class="sticky-header">固定顶部Header</header>
<div class="flex-container">
  <div class="left-content">
    <!-- 这里放置大量长内容，会触发窗口滚动 -->
    <p>内容段落...</p>
    <p>内容段落...</p>
    <!-- 重复足够多的内容以测试滚动 -->
  </div>
  <div class="right-sidebar">
    <h3>粘性侧边栏</h3>
    <p>这部分内容会始终固定在视口内，跟随页面滚动保持可见</p>
  </div>
</div>

关键说明 #

1. 窗口滚动触发：左侧容器不设置固定高度和滚动属性，内容高度超过视口时会自动触发整个页面的滚动条，而非容器自身的滚动条。
2. 粘性定位适配Header：top: 60px确保右侧侧边栏在滚动时不会被顶部固定的Header遮挡，数值需与Header的实际高度保持一致。
3. Flex项对齐修正：align-self: flex-start解决了Flex布局中默认stretch对齐导致侧边栏高度与左侧一致，从而无法触发粘性定位的问题。

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