实现看板列等高且内部元素占满可用空间的CSS方案

DevOps 小满

2026-5-29

解决看板布局的等高列与空间分配问题

我来帮你搞定这个布局难题！咱们可以借助Flexbox来完美解决这些问题，不用硬写固定高度，就能满足所有需求。下面是调整后的代码和详细说明：

修改后的CSS代码

.ltg-column-parent {
  margin: 1px;
  padding: 0;
  background-color: lightgray;
  padding-bottom: 1rem;
  /* 关键：把列容器改成垂直方向的flex布局 */
  display: flex;
  flex-direction: column;
  /* 确保大屏下列等高 */
  height: 100%;
}

.ltg-column-inside {
  background-color: rgb(151, 151, 151);
  /* 替换height:100%为flex:1，让它自动占据剩余空间 */
  flex: 1;
  /* 可选：让任务盒自动换行，优化布局 */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
}

.task-box {
  width: 10rem;
  height: 6rem;
  color: black;
  background-color: white;
  border: 1px solid lightgray;
  border-left: 7px solid yellow;
  padding-left: 1rem;
  padding-top: 1rem;
}

.task-table-bottom-buttons {
  /* 按钮会自然排在flex容器的底部，无需额外定位 */
  margin-top: 0.5rem;
  padding: 0 0.5rem;
}

关键调整说明

列等高实现：给.ltg-column-parent加上display: flex; flex-direction: column; height:100%;，结合Bootstrap的row（默认是flex容器），大屏下列会自动等高；小屏幕列堆叠时，高度会自适应内容，完全符合你的需求。
深灰色区域自适应空间：把.ltg-column-inside的height:100%换成flex:1，这样它会自动占据列内除了标题和底部按钮之外的所有可用空间——既不会溢出父容器，又能保证足够的拖拽放置区域。我额外加了flex-wrap: wrap; gap: 0.5rem;，让任务盒可以自动换行，布局更整洁。
按钮固定在底部：因为列容器是垂直flex布局，.task-table-bottom-buttons作为flex子元素，会自然排在深灰色区域的下方，固定在列的底部区域，不会被任务遮挡。