如果你真的有兴趣了解它,那么没有比规格更好的地方：The Visual Formatting Model

但这是一个概述.

内联元素的高度与块元素的计算方式不同 – 因此从这里开始,这仅指块元素或已赋予新块格式上下文的元素.

首先,当你给一个100％高度的元素时,它将从它的包含块中取出它的高度,例如.它是父级,它的父级从它的父级获取它的高度,然后返回到初始包含块.

初始包含块在HTML(主体)和XML / XHTML(html)中是不同的,它的默认高度不是视口的100％,所以通常你会覆盖你的屁股并以这种方式定义它：

html,body {
   margin:0;
   padding:0;
   height:100%;
}

我们必须将边距和填充归零,因为在CSS中,Height属性是指Content Box的高度,如果有任何边距或填充(或边框),我们会得到一个滚动条.高度将是100％填充边界边距… W3C Box Model

例外情况是IE是在Quirks Mode … IE box model

…所以除非你通过所有后代元素维持这个“100％高度”,否则你正在为每个新的后代重新定义“100％高度”的含义.这也可以通过创建新的块格式化上下文来影响.浮动或绝对定位元素时创建新的bock格式化上下文(以及some other things)

关于表格单元的高度……

人们经常会问：“为什么我的100％高度的Div不能在桌子上工作？”.

这与表格单元的高度计算方式有关.渲染单元格时,其内容框的高度未拉伸以匹配父行的高度.相反,渲染器会根据需要添加额外的填充,以使整体高度与行的高度相匹配.所以在这个例子中……

<tr>
   <td>
      line one<br>
      line two<br>
      line three
   </td>
   <td>
      <div style="height:100%">
         Hello world!
      </div>
   </td>
</tr>

… Div的高度是100％ – 单元格内容框的100％.单元格的内容框被赋予额外的填充,以便它与行的整体高度相匹配. Div的高度是其父母内容框的100％(不是整体高度).

见Table height algorithms.

由于这个问题几乎每天都会被问到,我已经检查了Wiki复选框 – 我是一个新手,但可以推测这将使其他人更容易根据需要进行更正和添加.