如何使table-cell内的container填充父元素全部高度（非Flexbox方案）

由于业务用例限制，不使用flexbox，改用table布局实现内容垂直对齐，这部分效果正常，但内部的container无法填充父元素的剩余高度，能否通过CSS实现该需求？

原代码示例 #

HTML代码 #

<html>
  <body>
    <div class="row">
      <div class="cell">
        <div class="container">
          Hello world
        </div>
      </div>
      <div class="cella">
        Cell2
      </div>
    </div>
  </body>
</html>

CSS代码 #

.container {
  background-color: red;
  height: 100%; 
}

.cell {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid black;
  min-width: 100px;
  max-width: 100px;
  min-height: auto;
  max-height: none;
}

.cella {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid black;
  min-width: 100px;
  max-width: 100px;
  height: 30px;
  max-height: none;
}

.row {
  display: table
}

解决方案 #

问题根源在于：table-cell 元素的高度由内容或兄弟单元格自动计算，并非显式的块级高度，直接给子元素设置 height:100% 无法识别父元素的高度值。以下提供两种可行的CSS实现方案：

方案一：绝对定位法 #

利用绝对定位让container填满整个cell，同时保持内容垂直居中：

.container {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 保持内容垂直居中，无需flex */
  line-height: 30px;
  text-align: center;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid black;
  min-width: 100px;
  max-width: 100px;
  position: relative; /* 为绝对定位提供参考 */
}

.cella {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid black;
  min-width: 100px;
  max-width: 100px;
  height: 30px;
  max-height: none;
}

.row {
  display: table
}

方案二：嵌套Table布局法 #

在cell内部再嵌套一层table结构，让container继承父元素的高度：

.container {
  background-color: red;
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  width: 100%;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid black;
  min-width: 100px;
  max-width: 100px;
  padding: 0; /* 去除默认padding避免间隙 */
  display: table; /* 将cell转为table容器 */
}

.cella {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid black;
  min-width: 100px;
  max-width: 100px;
  height: 30px;
  max-height: none;
}

.row {
  display: table
}

两种方案都能实现container填充cell的剩余高度，同时保持内容垂直居中的效果，可根据实际业务场景选择。

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