如何仅用CSS和HTML实现容器内浮动div垂直填充空余空间？

嘿，我明白你想要的是一个不依赖任何框架、能通用适配各种布局场景的解决方案。首先得说清楚：传统的float布局天生做不到这个需求——float元素的高度完全由自身内容决定，没有原生的机制让它主动去占据容器的剩余垂直空间。所以我们需要转向现代CSS布局，Flexbox或者Grid，这两个都是原生特性，通用性拉满，完全符合你的要求。

方案1：Flexbox布局（一维布局首选） #

Flexbox专门用来处理行或列的一维布局，通过flex-grow属性可以轻松让指定元素填充剩余空间。

完整代码示例 #

.outer {
  background-color: yellow;
  width: 500px;
  height: 500px;
  /* 开启垂直方向的Flex布局 */
  display: flex;
  flex-direction: column;
  /* 可选：子元素之间添加间距 */
  gap: 10px;
}

.inner-1, .inner-2, .inner-3 {
  /* 让子元素保持自身内容宽度，不拉伸满容器 */
  align-self: flex-start;
}

.inner-1 { background-color: red; }
.inner-2 { background-color: lightblue; }
.inner-3 { 
  background-color: green;
  /* 核心：让这个元素占据所有剩余垂直空间 */
  flex-grow: 1;
}

.p-1 { width:200px; height:200px; }
.p-2 { width:200px; height:250px; }
/* 去掉固定高度，让内容随父元素填充 */
.p-3 { width:200px; }

<div class="outer">
  <div class="inner-1">
    <div class="p-1">one</div>
  </div>
  <div class="inner-2">
    <div class="p-2">two</div>
  </div>
  <div class="inner-3">
    <div class="p-3">three</div>
  </div>
</div>

通用性说明 #

• 不管你有多少个子元素，只要给需要填充空间的元素加上flex-grow: 1，它就会自动吃掉容器的剩余垂直空间。
• 如果需要横向布局，只需要把flex-direction改成row，同样可以实现水平方向的剩余空间填充。
• 容器高度不固定也没关系，flex-grow会基于容器的实际高度动态计算剩余空间。

方案2：Grid布局（复杂二维布局首选） #

如果你的布局涉及到多行多列的二维场景，Grid布局会更灵活。我们可以通过定义网格行的高度规则，让指定行自动填充剩余空间。

完整代码示例 #

.outer {
  background-color: yellow;
  width: 500px;
  height: 500px;
  /* 开启Grid布局 */
  display: grid;
  /* 定义行规则：前两行高度由内容决定，第三行占满剩余空间 */
  grid-template-rows: auto auto 1fr;
  /* 可选：子元素间距 */
  gap: 10px;
}

.inner-1 { background-color: red; }
.inner-2 { background-color: lightblue; }
.inner-3 { background-color: green; }

.p-1 { width:200px; height:200px; }
.p-2 { width:200px; height:250px; }
.p-3 { width:200px; }

<div class="outer">
  <div class="inner-1">
    <div class="p-1">one</div>
  </div>
  <div class="inner-2">
    <div class="p-2">two</div>
  </div>
  <div class="inner-3">
    <div class="p-3">three</div>
  </div>
</div>

通用性说明 #

• grid-template-rows里的auto表示行高由内容决定，1fr是“剩余空间单位”，会占据所有可用的剩余空间。比如你有4个子元素，就可以写成auto auto auto 1fr，让最后一个元素填充。
• 要实现多列布局，只需要添加grid-template-columns，比如grid-template-columns: 200px 1fr，就能让第二列填充剩余水平空间。
• Grid支持元素跨多行多列，即使是复杂布局，剩余空间填充的逻辑依然简单可靠。

为什么不推荐继续用float？ #

float是为了早期的文字环绕排版设计的，它没有内置的空间分配能力。要强行用float实现剩余空间填充，只能用一些hack（比如负margin、绝对定位），但这些方案不仅不通用，还很容易出现布局错乱，维护起来特别麻烦。现代CSS布局（Flexbox/Grid）兼容性已经覆盖了几乎所有浏览器（包括IE11），完全是更好的选择。

内容的提问来源于stack exchange，提问作者Nick-jove