TD单元内单元高度

Question

我有一个问题，我在TD元素中有元素，当我将元素高度设置为100%时，它将无法填充整个TD单元格的高度。如果内容没有相同的高度，是否可以在内部元素中填充整个TD高度？

<table>
<tr>
    <td>
        <div>
            1<br/>
        </div>
    </td>
    <td>
        <div>
            2<br/><br/><br/>
        </div>
    </td>
</tr>
</table>

CSS

table {
 width: 200px;
 position: relative; 
 }
 table tr td {
 background-color: blue;
 width: 47%;
 position: relative;
 margin: 10px 1%;
 border: 1px solid #eee;
 }
 table tr td div {
 height: 100%;
 background-color: red;
 }

例如，参见下面的jsfiddle：

http://jsfiddle.net/7esUV/

Answer 1

这在css中是不可能的，因为表格单元格的高度是基于它的内容。div将它的高度以它的父级的高度为基础，在本例中是表单元格。因此，如果只有一条线，那条线的高度就是表格单元格的高度，因此是其中div的高度。

请看一下为什么表格单元格中的div是个坏主意：Is a DIV inside a TD a bad idea?。

Answer 2

是的，这是可能的，但您的示例不起作用，因为您将height:100%设置为具有未指定高度的另一个元素( td)中的div。

因此，只需将高度设置为td元素或通过js计算单元格的高度，然后将该高度应用于div。

Answer 3

您需要设置tr的高度，然后按像素设置元素的高度，以匹配我更新的jsfiddle http://jsfiddle.net/peter/7esUV/3/。