如何实现Bootstrap容器内滚动内容区与底部固定总计栏的自适应布局

用Bootstrap的Flex布局就能完美解决这个问题，核心是让容器占满Splitter面板的高度，再通过flex分配空间：

关键布局逻辑 #

• 给右侧面板的容器关闭自带滚动条，确保布局完全由自定义容器控制
• 自定义购物车容器使用Bootstrap的垂直flex布局，并设置高度100%，完全匹配Splitter面板高度
• cakes区域自动填充除total之外的剩余空间，同时开启垂直滚动
• total区域自然留在容器底部，随窗口resize自动适应宽度

完整代码示例 #

<!-- Telerik Splitter右侧面板，关闭自带滚动条 -->
<div class="k-splitter-pane" style="overflow: hidden;">
  <!-- 购物车主容器：Bootstrap垂直flex + 占满父级高度 -->
  <div class="d-flex flex-column h-100">
    <!-- 可滚动的cakes区域 -->
    <div class="flex-grow-1 overflow-auto p-3">
      <!-- 动态生成的蛋糕项示例 -->
      <div class="border-bottom py-2 mb-2">巧克力慕斯 - ￥49.9</div>
      <div class="border-bottom py-2 mb-2">草莓奶油蛋糕 - ￥59.9</div>
      <div class="border-bottom py-2 mb-2">提拉米苏 - ￥39.9</div>
      <div class="border-bottom py-2 mb-2">抹茶千层 - ￥69.9</div>
      <div class="border-bottom py-2 mb-2">芝士蛋糕 - ￥55.9</div>
      <div class="border-bottom py-2 mb-2">黑森林蛋糕 - ￥79.9</div>
      <div class="border-bottom py-2 mb-2">芒果班戟 - ￥29.9</div>
    </div>

    <!-- 固定在底部的total行 -->
    <div class="border-top p-3 bg-light">
      <div class="d-flex justify-content-between align-items-center">
        <span class="fs-5">总计：</span>
        <strong class="fs-4">￥384.3</strong>
      </div>
    </div>
  </div>
</div>

之前方法失效的原因 #

• 用position:absolute+bottom:0时没给父容器加position:relative，导致total相对于窗口而非容器定位，才会覆盖内容
• margin:auto仅在容器高度明确时生效，之前没给容器设置h-100（占满父级高度），所以只有窗口最大化时才起作用
• 给cakes设max-height没用是因为容器高度不确定，用flex-grow:1才能让它自动填充剩余空间，配合overflow:auto才会生成滚动条

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