填写所有div的父级高度

Question

我的结构类似于以下内容：

<div class="cell-row">
    <div class="cell">
        //Some tall content
    </div>
    <div class="cell">
        //Some short content
    </div>
</div>

所以基本上有一堆内联块单元格彼此相邻。它们都包含各种高度的内容。我在父容器上设置了一个最小高度，我希望它们都填充父容器（高度），使它们看起来像一个表。

---

但是，使用我当前的CSS，最高的CSS填充父级，其余所有CSS只根据其内容高度填充。

这是一个JSFiddle，展示了我在说什么。我希望带有2的盒子的高度与盒子中的1相同。

---

这是相关的CSS：

div.cell-row
{
    min-height: 150px;
}

div.cell
{
    display: inline-block;
    vertical-align: top;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 10px;
    height: 100%;
}

我认为height: 100%;会使所有单元格填充父.cell-row高度，但事实并非如此。

JSFiddle

Answer 1

div.cell-row
{
    display : table-row;
    ...
}

div.cell
{
    display : table-cell;
    ...
}

http://jsfiddle.net/680r224b/2/

---

要使表格仍然填满容器，并使min-height正常工作，请使用：

div.cell-row
{
    display : table;
    ...
}

Answer 2

html, body
{
    margin: 0;
    height: 100%;
}

div.cell-row
{
    min-height: 150px;
    background: #111;
    display:table;
    width:100%;
    font-size: 0;
}

div.cell-row div.cell
{
    display: inline-block;
    vertical-align: top;
    display:table-cell;
    
    border-right: 1px solid #aaa;
    background: #ccc;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    
    width: 50%;
    padding: 10px;
    height: 100%;
}

div.cell-row div.cell p
{
    font-size: 80px;
}

<div class="cell-row">
    <div class="cell">
        <p>1</p>
        <p>test</p>
    </div>
    <div class="cell">
        <p>2</p>
    </div>
</div>