如何让浮动元素自动填充display:table父元素剩余高度？附布局方案咨询

嘿，我来帮你搞定这个布局难题！先看你的代码，目前用了float加display:table的混合写法，其实这俩特性有点不搭，导致高度自适应不好实现。下面分两部分给你解决方案：

一、让.3自动填充剩余高度 #

方案1：活用CSS表格布局的原生特性 #

既然父元素已经设了display:table，那咱们干脆把内部元素都改成表格相关的结构，让浏览器自动帮我们处理高度对齐：

首先修改父元素样式，用表格的border-spacing代替margin（因为表格单元格的margin不生效）：

.parent {
  width: 960px;
  display: table;
  table-layout: fixed; /* 让布局更稳定，宽度不会被内容撑开 */
  border-collapse: separate;
  border-spacing: 20px; /* 这个就是咱们要的间距啦 */
}

然后调整HTML结构，把右侧的.2和.3放进一个容器里，让这个容器成为表格的一列：

<div class="parent">
  <div class="col-left">1</div>
  <div class="col-right">
    <div class="box-2">2</div>
    <div class="box-3">3</div>
  </div>
</div>

（顺便提一句：CSS类名别用纯数字开头哦，不符合规范，我改成了.box-2、.box-3，你可以按需调整）

对应的CSS：

.col-left {
  width: 45%;
  display: table-cell;
  /* 高度不用设，自动随内容变化 */
}

.col-right {
  width: 45%;
  display: table-cell;
  vertical-align: top;
  display: table;
  height: 100%; /* 继承父表格的高度 */
  width: 100%;
}

.box-2 {
  display: table-row;
  height: 200px; /* 固定高度 */
}

.box-3 {
  display: table-row;
  height: 100%; /* 关键！自动填充剩余高度 */
}

这样不管.col-left的内容变多变少，.box-3都会自动占满右侧列剩下的高度。

方案2：用Flexbox实现（更简洁，推荐！） #

Flexbox现在是布局的首选，代码少逻辑清晰，兼容性也拉满：

先把父元素改成Flex容器：

.parent {
  width: 960px;
  display: flex;
  gap: 40px; /* 左右列之间的间距，代替margin */
  padding: 0 20px; /* 保留左右的边距空间 */
}

左侧列随内容走，右侧列改成垂直方向的Flex容器：

.col-left {
  width: 45%;
}

.col-right {
  width: 45%;
  display: flex;
  flex-direction: column;
}

.box-2 {
  height: 200px;
  margin-bottom: 20px; /* .2和.3之间的间距 */
}

.box-3 {
  flex: 1; /* 核心属性！自动填充剩余高度 */
}

HTML结构和方案1一样，这样.box-3就会乖乖填满右侧剩下的高度，完全不用管左侧高度怎么变～

二、更好的布局实现方式 #

你当前的float+display:table混合写法有点绕，更推荐用Flexbox或者CSS Grid来实现这种类表格布局，理由如下：

• 代码更简洁，逻辑一目了然，不用记表格布局的特殊规则
• 响应式适配超方便，比如小屏幕上改个flex-direction或者grid-template-columns就能变成垂直布局
• 对间距、高度的控制更灵活

额外推荐：CSS Grid方案（适合复杂表格布局） #

如果你的布局更接近表格的多列多行结构，Grid会更直观：

.parent {
  width: 960px;
  display: grid;
  grid-template-columns: 45% 45%; /* 两列宽度 */
  grid-template-rows: auto 1fr; /* 第一行高度随内容，第二行占剩余 */
  gap: 20px;
  padding: 0 20px;
}

.col-left {
  grid-row: 1 / 3; /* 左侧列跨两行，自动和右侧总高度对齐 */
}

.box-2 {
  height: 200px;
}

.box-3 {
  /* 不用额外设置，自动占满第二行的剩余高度 */
}

HTML结构直接用你原来的就行（调整类名后）：

<div class="parent">
  <div class="col-left">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
</div>

这个方案里，布局逻辑清晰到不行，左侧自动跨两行，.box-3自动填满剩余高度，完美匹配你要的表格布局效果。

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