如何在行高度太大的td中展开div

Question

我有一个表格，其中单元格有固定的高度。在其中一个单元格中有一个tall元素，它使一行垂直展开。还有一个单元格，它的div元素被设置为单元格高度的100%。我想让这个div元素垂直扩展到单元格的高度，比单元格的原始设置高度更远。我该怎么做呢?

table,
th,
td {
border: 4px solid black;
border-collapse: collapse;
}
th,
td {
background-color: orange;
height: 30px;
padding: 0px;
}

<table>
<tr>
<td>
<div style="height:50px; background:green">Tall element</div>
</td>
<td>
<div style="background:yellow;height:100%">Should expand</div>
</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Answer 1

对于动态div填充，父容器需要100% height。为了解决这个问题，我们可以将30px设置为min-height，并创建一个div CSS属性为inherit和height。

table,
th,
td {
border: 4px solid black;
border-collapse: collapse;
height: 100%;
}
th,
td {
background-color: orange;
padding: 0px;
min-height:30px;
}
div {
height: inherit;
}

<table>
<tr>
<td>
<div style="height:50px; background:green">Tall element</div>
</td>
<td >
<div style="background:yellow;">Should expand</div>
</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>