Bootstrap5 fixed父div下固定头尾滚动内容响应式适配问题求助

现有代码问题梳理 #

• 右侧列未设置position: relative，内部绝对定位元素会以最外层全屏fixed容器为参照，而非当前列，导致布局错位
• 中间滚动区域直接设置h-100，未减去顶部header和底部footer各50px的高度，会出现内容被遮挡、溢出视口的问题
• 行容器未清除默认间距，容易触发水平滚动条
• 未做小屏断点适配，sm以下宽度时两列堆叠后原有绝对定位逻辑失效

修复后完整代码 #

<div class="position-fixed bg-dark bottom-0 top-0 end-0 start-0">
  <div class="row h-100 g-0">
    <!-- 左侧视频区域 -->
    <div class="col-sm-8 d-flex align-items-center justify-content-center p-2">
      <div class="ratio ratio-16x9 w-100">
        <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
      </div>
    </div>

    <!-- 右侧信息区域 -->
    <div class="col-sm-4 position-relative p-0 bg-light">
      <!-- 头部固定栏 -->
      <div class="position-absolute top-0 start-0 end-0 bg-dark text-white d-flex align-items-center px-3" style="height:50px;">header</div>
      
      <!-- 中间可滚动内容 -->
      <div class="position-absolute start-0 end-0 overflow-auto px-3 py-2" style="top:50px;bottom:50px;">
        scrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling contentscrolling content
      </div>
      
      <!-- 底部固定栏 -->
      <div class="position-absolute bottom-0 start-0 end-0 bg-dark text-white d-flex align-items-center px-3" style="height:50px;">footer</div>
    </div>
  </div>
</div>

关键改动说明 #

1. 外层行容器新增h-100 g-0：保证行占满全屏父容器的高度，同时移除Bootstrap默认的列间距，避免出现横向滚动条
2. 右侧列新增position-relative p-0：将内部绝对定位元素的参照系限定在当前列内，而非全局父容器，同时清除默认内边距
3. 头部、底部固定栏新增start-0 end-0：确保两者宽度铺满当前列，不会出现偏移、宽度不足的问题
4. 中间滚动区域改用上下定位限制高度：通过top:50px;bottom:50px自动计算可用高度，内容超出时自动触发滚动，不会被上下固定栏遮挡
5. 左侧视频区域新增弹性布局属性：让16:9视频容器在左侧列内垂直水平居中，预留少量内边距避免贴边显示

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