Flex布局下固定单个容器实现Main模块顶部粘性及内容区域滚动的方案咨询

完全可以在你现有flex列布局的基础上实现这个需求，根本不用换掉flex！我给你一个直接适配你场景的解决方案，完美复刻YouTube顶部播放器的粘性效果：

核心实现思路 #

我们只需要对现有结构做小调整：给最外层flex容器设置固定高度，把main模块设为粘性定位，再把content A~D放到一个单独的滚动容器里即可。

修改后的完整代码示例 #

<div style="display: flex; flex-direction: column; height: 100vh; margin: 0; padding: 0;">
  <main class="main-contents" role="main" style="position: sticky; top: 0; background: #fff; z-index: 10; padding: 1rem; border-bottom: 1px solid #eee;">
    TopHeader (类似YouTube播放器的粘性头部)
  </main>
  <div style="overflow-y: auto; flex: 1; padding: 1rem;">
    <div style="height: 200px;">content A</div>
    <div style="height: 200px;">content B</div>
    <div style="height: 200px;">content C</div>
    <div style="height: 200px;">content D</div>
    <div style="height: 200px;">content E</div>
    <div style="height: 200px;">content F</div>
  </div>
</div>

关键样式解释 #

• 最外层flex容器：设置height: 100vh让它占满整个视口高度，这是让内部滚动区域有固定参考的前提；同时重置margin和padding避免默认间距影响布局。
• main模块：position: sticky; top: 0是实现粘性的核心——当滚动内容区域时，main会固定在容器顶部。添加background: #fff防止下方内容滚动时透出来，z-index: 10确保头部始终在内容上方，不会被遮挡。
• 内容滚动容器：flex: 1让它占据flex容器中除main外的所有剩余空间；overflow-y: auto则在内容超出容器高度时自动显示垂直滚动条。

响应式适配提示 #

这个方案完全兼容响应式场景：

• 你可以通过媒体查询调整外层容器的高度（比如在移动端设height: calc(100vh - 50px)来适配底部导航栏）。
• flex布局的特性会自动让main和内容容器在不同屏幕尺寸下保持正确的比例和排列。
• 如果main模块的高度是动态变化的（比如自适应内容），sticky定位依然能正常工作，不会出现错位问题。

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