div 不会用高度填充 TD 的高度:100%

Question

我知道关于这个问题有很多答案。 但我似乎无法理解。 这是我的例子：

http://jsfiddle.net/xyJkc/2/

看到第一个div没有填满td的总高度。 我希望每个td中的div 填满整个高度，无论每个文本中的文本有多少或多少。

我想不清楚的是，每行的高度没有明确定义，但它是由单元格内容的最大高度定义的。

谢谢你的帮助！

代码如下：

.html：

<table>
    <tr>
        <td>
            <div>text</div>
        </td>
        <td>
            <div>many lines of text. More and more.</div>
        </td>
    </tr>
</table>

.css：

table {
    width:100px
}
td {
    border: 1px solid grey;
    height: 100%;
}
div {
    height: 100%;
    border: 1px solid;
}

Answer 1

请尝试：div 将为 100%;高度。

div{
    height: 100%;
    border: 1px solid;
    display:inline-block;
}

Answer 2

您可以添加显示：内联表;

div{
    height: 100%;
    display:inline-table;
    border: 1px solid;
} 

http://jsfiddle.net/xyJkc/13/

Answer 3

您可以在桌子或 tr 上设置高度。然后div 将填充整个 td。

例：

tr{
   height: 5em; /* or px */
}

Answer 4

我认为

这是因为您的div 将位置值设置为静态（默认情况下）。您可以通过position:absolute;属性赋予tr来修复它，或者如果您不想这样做，可以使用 jQuery：

$(function()
{
    $('div').height($('tr').height());
});