Question

我不明白这两个HTML之间的不同行为：

<!DOCTYPE HTML><html><body>
<TABLE style='border:1px solid black'>
<TR>
    <TD style='height:100px'><div style='width:100px;height:100%;background-color:#ccc'></div></TD>
</TR>
</TABLE>
</body></html>

JFiddle：https://jsfiddle.net/ceyq6n10/

和

<!DOCTYPE HTML><html><body>
<TABLE style='border:1px solid black'>
<TR style='height:100px'>
    <TD><div style='width:100px;height:100%;background-color:#ccc'></div></TD>
</TR>
</TABLE>
</body></html>

JFiddle：https://jsfiddle.net/hmjvu5gf/

在第一个示例中，DIV垂直扩展到TD高度的100％。在第二个中，即使TD具有正确的垂直尺寸，DIV也具有高度0。

你能解释一下为什么吗？感谢

Answer 1

您对height: 100%使用<div>，但没有为父<td>指定身高。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则计算使用的高度，就好像指定了“auto”一样。

css spec about height calculation

因此，当您使用％来设置高度或宽度时，请始终设置父元素的宽度/高度。

Answer 2

通过调整单元格大小，我们可以控制行高。

Answer 3

您应该将这样的样式规则应用于包含实际内容的容器，如文本或其他html。在这种情况下，您td是内容的实际容器。

对于tr标签，您只能将th或td放在tr中，而不是实际内容中。屏幕空间的样式适用于作为实际内容容器的标签（如td，th），或实际上它们自己可以占用屏幕空间。 tr更像是行去标记。您可以将背景颜色等内容应用于tr，它将适用于td。将屏幕空间规则应用于更具体的内容容器。

TR上的高度设置与TD上的高度不同。为什么？

3 个答案: