SOURCE

<div class="box">
  <div class="inner_box">
    子元素高度设置百分比后，是根据父元素的高度计算的。
    此例中.box 的高度为 100px，则 .inner_box 的高度为 50px.
  </div>
</div>

.box {
  height: 100px;
  padding: 100px 0;
  border: 1px solid red;
}

.inner_box {
  height: 50%;
  border: 1px solid gray;
}