如何使两个display:table-cell div内的嵌套div高度保持匹配

API 探路者

2026-9-3

问题说明

使用display: table-cell实现两个div等高对齐时，单元格本身高度可以随内容自动匹配，但单元格内部用于实现黄色虚线外框的子div无法同步撑满父单元格高度，单侧内容增多拉高单元格后，另一侧的虚线框高度不会随之拉伸。

原有实现代码如下：

.generalinfocontainer {
  width: 50%;
  height: auto;
  background-image: url("https://imgur.com/qbIkHqm.png");
  display: table-cell;
  border-radius: 25px;
  text-shadow: 1px 1px #000000;
}
.statscontainer {
  width: 30%;
  height: auto;
  background-image: url("https://imgur.com/qbIkHqm.png");
  display: table-cell;
  border-radius: 25px;
  text-shadow: 1px 1px #000000;
}
.t {
  display: table;
  width: 100%;
  border-spacing: 20px;
}
.generalinfowrapper {
  border-width: 2px;
  border-color: yellow;
  border-style: dashed;
  margin: 3px;
  border-radius: 25px;
  height: 100%;
  padding: 8px;
}
.statswrapper {
  border-width: 2px;
  border-color: yellow;
  border-style: dashed;
  margin: 3px;
  border-radius: 25px;
  height: 100%;
  padding: 8px;
}
.statbar {
  border-radius: 15px;
  background-image: url("https://imgur.com/gdh95cn.png");
  padding: 1px;
  width: 100%;
  height: auto;
  border-style: solid;
  border-color: black;
  border-width: 1px;
}
.fillbar {
  border-radius: 15px;
  background-color: #a3c1ad;
  height: 100%;
  padding-left: 4px;
  border-color: black;
  border-width: 1px;
  border-style: solid;
  margin: 0px;
}
.boxtitle {
  text-align: center;
}

<div class="t">
  <div class="generalinfocontainer">
    <div class="generalinfowrapper">
      [b][size=24][color=yellow]KOMON HYUUGA[/color][/size][/b]
    </div>
  </div>
  <div class="statscontainer">
    <div class="statswrapper">
      <div class="boxtitle">
        [b][size=24][color=yellow]STATISTICS[/color][/size][/b]
      </div>
      [b]VIGOR[/b]<br />
      <div class="statbar">
        <div class="fillbar" style="width:80%;"> 80/100</div>
      </div>
      [b]CHAKRA[/b]<br />
      <div class="statbar">
        <div class="fillbar" style="width:80%;"> 80/100</div>
      </div>
      [b]SPEED[/b]<br />
      <div class="statbar">
        <div class="fillbar" style="width:80%;"> 80/100</div>
      </div>
      [b]STRENGTH[/b]<br />
      <div class="statbar">
        <div class="fillbar" style="width:80%;"> 80/100</div>
      </div>
    </div>
  </div>
</div>

问题原因

table布局有特殊的高度计算规则：display: table-cell的元素默认高度由内容自动撑开，在没有给单元格本身设置明确高度值的情况下，子元素设置height: 100%无法获取到父单元格的有效计算高度，因此不会自动撑满。

修复方案

仅需要两处CSS改动即可解决问题，不需要调整HTML结构：

给两个table-cell容器（.generalinfocontainer、.statscontainer）添加height: 1px属性。这个值不会让单元格真的收缩到1px高度，只是触发表格布局的高度计算规则，让子元素的百分比高度有可参照的父级高度值，单元格最终还是会和同行最高单元格保持等高。
给两个虚线框容器（.generalinfowrapper、.statswrapper）添加box-sizing: border-box属性，让元素的内边距、边框包含在100%高度的计算范围内，避免内容溢出父容器。

修改后的核心CSS代码：

.generalinfocontainer {
  width: 50%;
  /* 新增height触发百分比高度计算 */
  height: 1px;
  background-image: url("https://imgur.com/qbIkHqm.png");
  display: table-cell;
  border-radius: 25px;
  text-shadow: 1px 1px #000000;
}
.statscontainer {
  width: 30%;
  /* 新增height触发百分比高度计算 */
  height: 1px;
  background-image: url("https://imgur.com/qbIkHqm.png");
  display: table-cell;
  border-radius: 25px;
  text-shadow: 1px 1px #000000;
}
.generalinfowrapper {
  border-width: 2px;
  border-color: yellow;
  border-style: dashed;
  margin: 3px;
  border-radius: 25px;
  height: 100%;
  padding: 8px;
  /* 新增盒模型规则避免溢出 */
  box-sizing: border-box;
}
.statswrapper {
  border-width: 2px;
  border-color: yellow;
  border-style: dashed;
  margin: 3px;
  border-radius: 25px;
  height: 100%;
  padding: 8px;
  /* 新增盒模型规则避免溢出 */
  box-sizing: border-box;
}
/* 其余CSS保持不变即可 */

修改完成后，任意一侧单元格内容增加拉高整体高度时，另一侧的黄色虚线框都会自动撑满对应单元格的高度，实现预期的对齐效果。

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