CSS height属性不起作用

https://jsfiddle.net/g9979h5c/

<div id="d1">
  hello
  <br> world
  <div id="d2" style="height:100%">

  </div>
</div>

子元素设置了height:100%，但是开发者工具显示它的高度是0。

首先，height的百分比是指向父元素的高度的，但是因为父元素没有显式的高度（在例子中是auto），所以取其百分比无效。