在不指定 <td> 高度的情况下，使 <div> 充满其父级 <td> 的高度

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 表格大小也会动态更改，并且始终是绝对值。（出于某些原因，我也不想使用行/列跨度，以防有人建议这样做。）

有什么想法吗？

- Virus721

---

定义你的 div 高度最小高度为 100%; - Rohit Azad Malik

很遗憾，既min-height也height都无法正常工作。 - Virus721

已删除的回答：我已经尝试过这个方法，但它不起作用。 <div> 元素占据了整个视口大小。 - Virus721

Answer 1

我通过在每个 div.Key 中添加一个内部的 div 并使用 display: table; 和 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>

- Virus721