如何实现上下固定高度、中间行占满可用高度的Bootstrap布局

直接给你能用的解决方案，核心是利用Bootstrap的flex垂直布局特性，让中间区域自动占满剩余空间：

关键调整点 #

• 外层列容器保持h-100确保高度拉满
• 内部父容器用d-flex flex-column h-100，让子元素垂直分布
• 上下固定行加flex-shrink-0，防止被压缩，同时设置固定高度height:3em
• 中间行加flex-grow-1 overflow-auto，自动占据剩余空间，内容超出时显示滚动条

修正后的完整代码 #

CSS #

.issue-board .state-column {
  background-color: aquamarine;
  min-width: 15em;
  max-width: 15em;
}

.issue-board .state-column-header {
  background-color: azure;
  height: 3em;
}

.issue-board .state-issues {
  background-color: beige;
  overflow: auto;
}

.issue-board .state-add-issue {
  background-color: bisque;
  height: 3em;
}

HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="issue-board">
  <div class="col-3 state-column border-1 border-primary h-100">
    <div class="d-flex flex-column h-100">
      <!-- 头部固定行 -->
      <div class="flex-shrink-0 state-column-header border-bottom border-primary m-2">
        <h3>New</h3>
      </div>
      <!-- 中间自适应行 -->
      <div class="flex-grow-1 state-issues overflow-auto m-2">
        <ul>
          <li>测试项1</li>
          <li>测试项2</li>
          <li>测试项3</li>
          <li>测试项4</li>
          <li>测试项5</li>
          <li>测试项6</li>
          <li>测试项7</li>
          <li>测试项8</li>
          <li>测试项9</li>
        </ul>
      </div>
      <!-- 底部固定行 -->
      <div class="flex-shrink-0 state-add-issue m-2">
        <button class="btn">Add Item</button>
      </div>
    </div>
  </div>
</div>

你之前代码的问题 #

1. 第一个示例用了container-fluid，它自带的padding和flex布局会干扰垂直空间分配
2. 第二个示例的中间行用了flex-shrink-1，这是控制压缩比例的属性，应该用flex-grow-1来让它主动占据剩余空间

这样调整后，就能实现和GitHub项目视图一样的效果：头部和底部按钮高度固定，中间任务区域自动填充剩余空间，内容过多时自动出现滚动条。

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