如何通过CSS实现含固定高度区域与互斥手风琴组件的页面100%视口高度布局

你的思路方向是对的，只需要调整一下flex布局的层级和属性，就能完美实现需求，不需要JavaScript来计算高度。核心是利用flex布局的弹性空间分配，结合Bootstrap手风琴的.show类来控制展开面板的高度，让它自动填充剩余屏幕空间，同时处理滚动。

调整后的CSS代码 #

html, body {
  height: 100%;
  margin: 0;
  display: flex; /* 让body成为flex容器，垂直排列子元素 */
  flex-direction: column;
}

.fixed {
  height: 100px;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* 固定高度，不被压缩 */
}

.accordion-container {
  flex: 1; /* 自动填充body剩余的全部高度 */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止内部元素溢出容器 */
}

.accordion {
  flex: 1; /* 撑满accordion-container的高度 */
  display: flex;
  flex-direction: column;
}

.accordion-item {
  flex-shrink: 0; /* 未展开的项仅占标题高度 */
}

/* 只有展开的手风琴面板才会填充剩余空间 */
.accordion-collapse.show {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 限制内部内容不溢出 */
}

.accordion-body {
  flex: 1;
  overflow-y: auto; /* 内容过长时显示垂直滚动条 */
}

核心原理说明 #

• 页面层级的flex布局：把body设为垂直方向的flex容器，.fixed固定高度且不收缩，.accordion-container用flex:1自动占满剩余屏幕高度，确保总高度不超过屏幕。
• 手风琴的弹性空间：.accordion撑满容器高度，未展开的.accordion-item仅占标题高度；当某个面板被Bootstrap的.show类标记为展开时，对应的.accordion-collapse会通过flex:1填充剩余的全部空间。
• 滚动处理：展开的.accordion-collapse设置overflow:hidden，内部的.accordion-body用flex:1和overflow-y:auto，让过长的内容在面板内部滚动，不会撑破整个布局。

保留你的HTML结构（无需修改） #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="fixed"> Div 1 (Fixed Height) </div>
<div class="accordion-container">
  <div class="accordion" id="accordionExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingTwo">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
          Div 2
        </button>
      </h2>
      <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <p>Lots of content here...</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <p>Keep adding more lines to test scrolling.</p>
          <!-- Repeat many lines -->
          <p>Line 20</p>
          <p>Line 30</p>
          <p>Line 40</p>
          <p>Line 50</p>
          <p>Line 20</p>
          <p>Line 30</p>
          <p>Line 40</p>
          <p>Line 50</p>
          <p>Line 20</p>
          <p>Line 30</p>
          <p>Line 40</p>
          <p>Line 50</p>
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingThree">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Div 3
        </button>
      </h2>
      <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <p>Content for Div 3.</p>
          <p>It can also scroll if long.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

这样调整后，你就能实现：

• Div1始终固定高度可见
• 手风琴同一时间仅展开一个，展开的面板自动填充剩余屏幕高度
• 展开面板内容过长时，内部显示滚动条，不会超出屏幕范围

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