html - 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 不是一个好主意:Is a DIV inside a TD a bad idea? .