html - 做一个填充其父高度，而不指定高度

Question

我知道这里有一个类似的问题，但在我的情况下不起作用。

<table class="Layout">
    <tbody>
        <tr>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
            <td><div class="Key">HEY</div></td>
        </tr>
    </tbody>
</table>

如何在不为元素指定高度的情况下使我的div.Key元素具有与其父元素相同的高度？<td> <td>

我的表将动态更改（添加和删除列和行），因此我不能强制<td>元素为绝对大小，而且我也不想在每次修改表时都计算并给它们一个相对大小。表.Layout大小也会动态变化，并且始终是绝对值。（出于某些原因，我也不想使用 row/colspan 以防有人建议。）

任何想法？

Answer 1

我找到了一个解决方案，方法是在每个 div 中添加一个内部 divdiv.Key并使用display: table; and display: table-cell;This 来满足我的需要。这是代码：

.Layout {
    width: 1024px; /* TEST */
    height: 480px; /* TEST */
}
.Key {
    text-align: center;
    display: table;
    width: 100%;
    height: 100%;
}
.Key > div {
    display: table-cell;
    vertical-align: middle;
}

和 ：

<table class="Layout">
    <tbody>
        <tr>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
            <td><div class="Key"><div>HEY</div></div></td>
        </tr>
    </tbody>
</table>