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是个坏主意：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/

Answer 4

如果您无法在td或tr上设置固定高度（正如您在其中一个答案的评论中所提到的那样），我恐怕唯一的方式是 Javascript：

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

（我在这个例子中使用了jQuery）

TD元素内部元素高度

4 个答案: