html - 如何使显示 : table-cell be 100% 内的 的高度

Question

我的 HTML 中有一个使用 display: table 的表格。在这一行中，我有两个带有顶部/底部填充的单元格，在这些单元格内部我有 <div> s 可以是不同的高度:

<div style="display: table-row;">
    <div style="display: table-cell; padding-top:1rem; padding-bottom: 1rem;">
       <div style="background-color: red;">
          <input ng-model="row.abc">
       </div>
    </div>
    <div style="display: table-cell; padding-top:1rem; padding-bottom: 1rem;">
       <div style="background-color: blue;">
          <input ng-model="row.def">
          <input ng-model="row.ghi">
       </div>
    </div>
</div>

有什么方法可以让红色和蓝色的高度相等吗？就像现在一样，红色只是蓝色高度的一半。请注意，我不是在寻找可以使两个输入内联的东西。我正在寻找一种方法，使红色区域的高度扩展以匹配蓝色区域的任何高度，反之亦然。

我希望它能在现代浏览器中运行。谢谢

Answer 1

为什么不将 div 放入单元格中？因为这会起作用。

<div class="table">
    <div class="table-row">
        <div class="table-cell" style="background-color: red;">
           <input type="text" value="test" />
        </div>
        <div class="table-cell" style="background-color: blue;">
              <input type="text" value="test" />
              <input type="text" value="test" />
        </div>
    </div>
</div>

http://jsfiddle.net/e6vx7j8d/