Question

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

看到第一个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

可以添加display：inline-table;

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

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

Answer 2

请尝试： div将是100％;高度。

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

Answer 3

您可以在表格或tr上设置高度。那么div将填满整个td。

示例：

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

Answer 4

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

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

div不会用高度填充td的高度：100％

4 个答案: