如何拉伸垂直div元素来填充父容器？

Question

我有以下JS Bin

<div class="container">
  <div class="column">
    <div class="cell">Top left</div>
    <div class="cell">Top left bottom</div>
  </div>
  <div class="column">
    <div class="cell">Center</div>
  </div>
  <div class="column">
    <div class="cell">Top right</div>
    <div class="cell">Top right bottom</div>
  </div>
</div>

如何在没有明确设置高度的情况下制作垂直对齐的div ，并将其置于绝对位置，如下所示：

编辑：请不要建议我使用表格，因为我需要在上面的例子中解决我的问题。

Answer 1

如何将CSS tables与当前标记结合使用：

<强> FIDDLE

CSS

.container {
    display: table;
}

.column {
    display: table-cell;
    vertical-align: top;
}

.cell {
    border: 1px solid #000;
    width: 100px;
    font-size: 13px;    
}
.column:nth-child(2)
{
    border: 1px solid #000;
}
.column:nth-child(2) .cell
{
    border: none;
}

Answer 2

将其添加到样式表中：

.column:nth-child(2) .cell {
    padding-bottom: 18px;
}

DEMO