css - 使用 CSS 强制表列中的 div 与列具有相同的高度

Question

Here's my example.

如果您有两个表格列，其中一个的内容比另一个高，那么即使 height:100%，另一列中的 div 也不会扩展到第一列。如何使用 CSS 创建此行为？

<table>
    <tr>
        <td class="one">
            <ul>
                <li>fasdf</li>
                <li>asgasdf</li>
                <li>afdsaggrea</li>
                <li>asgasdf</li>
                <li>afdsaggrea</li>
            </ul>
        </td>
        <td class="two">
            <div class="three">
                First div
                <div>
                    Second div
                </div>
            </div>
        </td>
    </tr>
</table>

即在我的 jsfiddle ，我想要的行为是绿色框填充整个黄色框。

Answer 1

当您为它指定 100% 的高度时，您的 div 不会增长的原因是父级没有高度。

即。您有一个导致表格变大的列表。

为了解决这个问题，您可以向父单元格添加一个高度，并为子单元格设置 100% 的高度，如图所示 in this fiddle

.two{
    background-color:yellow;
    height:100px;
}
.three{
    background-color:green;
    height:100%;
}