使 <div> 填充其父 <td> 高度，而不在 <td> 上指定高度答案

【问题标题】：Make a <div> fill its parent <td> height, without specifying height on <td>使 <div> 填充其父 <td> 高度，而不在 <td> 上指定高度
【发布时间】：2013-08-03 08:42:05
【问题描述】：

我知道有一个类似的问题here，但它不适用于我的情况。

<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。）

有什么想法吗？

【问题讨论】：

定义你的 div 高度 min-height:100%;
不幸的是 min-height 和 height 都不起作用。
@已删除的答案：我已经尝试过了，但它不起作用。
元素占据了整个视口的大小。

标签： html css html-table

【解决方案1】：

我通过在每个 div.Key 中添加一个内部 div 并使用 display: table; and display: table-cell; 找到了一个解决方案，这可以满足我的需要。代码如下：

.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>

【讨论】：