如何让可变高度div紧凑堆叠填充剩余空间？

要让高度可变的div元素紧凑堆叠、无下方空白，核心是消除元素间的默认间距，同时避免布局容器的属性额外产生空隙。以下是可行的解决方案：

方案一：修复Flexbox布局 #

如果坚持使用Flexbox，只需调整容器和子元素的属性即可：

1. 容器设置垂直排列方向，移除可能导致空隙的属性
2. 清除子div的默认margin

示例代码 #

<div class="flex-container">
  <div class="stack-item">内容1，高度自适应</div>
  <div class="stack-item">内容2，这里是更长的文本内容，会自动撑开div的高度</div>
  <div class="stack-item">内容3</div>
</div>

.flex-container {
  display: flex;
  flex-direction: column;
  /* 移除align-content、gap等会产生空隙的属性 */
}

.stack-item {
  margin: 0; /* 清除默认margin，避免元素间留白 */
  border: 1px solid #ddd; /* 可选：添加边框便于观察布局 */
}

方案二：使用块级元素默认布局（更简洁） #

div本身是块级元素，默认会垂直堆叠，只需清除元素的默认margin即可实现紧凑效果，无需额外容器：

示例代码 #

<div class="stack-item">内容1</div>
<div class="stack-item">内容2</div>
<div class="stack-item">内容3</div>

.stack-item {
  margin: 0;
  border: 1px solid #ddd;
}

常见问题排查 #

• 检查浏览器默认样式：部分浏览器会给div添加默认margin，可通过全局重置样式解决：* { margin: 0; padding: 0; }
• 检查子元素的margin：如果div内部的元素（如p、h标签）带有margin-top/bottom，会导致div被撑开产生空隙，可给div添加overflow: hidden或调整内部元素的margin
• 检查Flex容器属性：若容器设置了gap、align-content: space-between等属性，会强制产生间距，需移除这些属性

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