TD元素内部元素高度

Question

我有一个问题，我在TD元素内有元素，当我将元素高度设置为100％时，它不会填充整个TD单元的高度。 如果内部元素的高度不同，是否可以在内部元素中填充整个TD高度？

的HTML

<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是个坏主意： TD内的DIV是个坏主意吗？ 。

Answer 2

是的，这是可能的，但是您的示例无法正常工作，因为您将height:100%设置为另一个元素（ td ）内具有未指定高度的div

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

Answer 3

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

Answer 4

如果您无法在td或tr上设置固定高度（如您在对答案之一的评论中所述），那么恐怕唯一的方法就是 Javascript：

http://jsfiddle.net/ptriek/xBjCE/

（在此示例中，我使用了jQuery）