不使用javascript

Question

我想在共享行的表格单元格中包含两个div，它们都具有较高div的高度。我想在没有JS的情况下这样做。这是一个简化示例的小提琴： http://jsfiddle.net/Lem53dn7/1/

以下是小提琴的代码：

HTML

<table>
    <tr>
        <td>
            <div>small content</div>
        </td>
        <td>
            <div>this is some longer content that will wrap.
                 I want the other div to be the same height as this one.</div>
        </td>
    </tr>
</table>

CSS

table{
    width: 200px;
    table-layout: fixed;
}
div {
    border: 1px solid black;
}

Answer 1

将以下属性添加到div规则中：

height: 100%;
display: inline-block;

Updated fiddle.

Answer 2

您可以为TD元素添加高度，然后使DIV高度为100％：

table{
    width: 200px;
    table-layout: fixed;
    height: 100%;
}

table td {
    height: 100%;
}

div {
    border: 1px solid black;
    height: 100%;
}

http://jsfiddle.net/Lem53dn7/7/