如何设置Bootstrap手风琴高度以填充父容器？

场景1：父容器固定高度（500px） #

要实现展开项填满固定高度的父容器，同时避免动画跳跃，核心是用Flex布局让手风琴项自动填充剩余空间，而非直接给.collapse设置固定高度：

1. 给父容器.accordion设置固定高度，并启用垂直方向的Flex布局
2. 让每个.accordion-item占据可用空间（flex-grow: 1）
3. 展开的内容容器.accordion-body也设置flex-grow: 1，确保内容填满项的高度

修改后的代码：

<!-- Bootstrap 5.3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<style>
/* 固定高度的手风琴父容器 */
.fixed-height-accordion {
  height: 500px;
  display: flex;
  flex-direction: column;
}

/* 让每个手风琴项填充可用空间 */
.fixed-height-accordion .accordion-item {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* 展开的内容区域填满项的高度 */
.fixed-height-accordion .accordion-collapse.show .accordion-body {
  flex-grow: 1;
}
</style>

<div class="container">
  <div class="accordion fixed-height-accordion" style="background-color: black;" id="accordionExample">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Accordion Item #1
        </button>
      </h2>

      <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
        <div class="accordion-body text-white">
          First Item Body<br>
          这个区域会填满500px高度的手风琴容器
        </div>
      </div>
    </div>

    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Accordion Item #2
        </button>
      </h2>

      <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
        <div class="accordion-body text-white">
          Second Item Body<br>
          切换到这个项时，同样会填满整个容器高度
        </div>
      </div>
    </div>
  </div>
</div>

场景2：父容器动态高度（自适应父元素/视口） #

如果父容器没有固定高度（比如占满视口高度、或者父元素的剩余空间），只需调整Flex布局层级，让手风琴先填满父容器，再让展开项填充手风琴的空间：

<!-- Bootstrap 5.3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<style>
/* 让手风琴填满父容器（示例占满视口高度） */
.dynamic-height-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.dynamic-height-accordion {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.dynamic-height-accordion .accordion-item {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.dynamic-height-accordion .accordion-collapse.show .accordion-body {
  flex-grow: 1;
}
</style>

<div class="container dynamic-height-container">
  <h3 class="text-center py-3">动态高度手风琴</h3>
  <div class="accordion dynamic-height-accordion" style="background-color: black;" id="accordionDynamic">
    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDynamicOne" aria-expanded="true" aria-controls="collapseDynamicOne">
            Dynamic Item #1
        </button>
      </h2>

      <div id="collapseDynamicOne" class="accordion-collapse collapse show" data-bs-parent="#accordionDynamic">
        <div class="accordion-body text-white">
          这个区域会填满父容器的剩余高度<br>
          父容器高度随视口变化而自适应
        </div>
      </div>
    </div>

    <div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDynamicTwo" aria-expanded="false" aria-controls="collapseDynamicTwo">
            Dynamic Item #2
        </button>
      </h2>

      <div id="collapseDynamicTwo" class="accordion-collapse collapse" data-bs-parent="#accordionDynamic">
        <div class="accordion-body text-white">
          切换后同样填满整个动态高度容器
        </div>
      </div>
    </div>
  </div>
</div>

为什么直接设置.collapse高度会导致动画跳跃？ #

Bootstrap的Collapse组件是通过计算内容的自然高度生成展开/收起动画的。如果手动给.collapse设置固定高度，会和组件内部计算的高度值冲突，导致动画过程中高度突变，出现跳跃效果。用Flex布局让内容自然填充空间，组件能正确计算高度，动画就会平滑过渡。

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