css div填滿剩餘高度

<div class="father">
      <div class="child1"></div>
      <div class="child2"></div>
      <div class="child3"></div>
    </div>      

1. 子絕父相
2. 同時設定top和bottom來填充剩餘垂直空間

.father {
  /* 父元素必須設定為相對定位，否則子元素會相對于整個頁面進行定位 */
  position: relative;
  height: 200px;
  width: 100px;
  background: green;
}
.child1 {
  height: 50px;
  background: blue;
}

.child2 {
  background: red;
  /* 子元素用絕對定位，同時父元素需設定相對定位，否則子元素會相對于整個頁面進行定位 */
  position: absolute;
  /* 50px 為其他元素已占據的父元素空間的高度 */
  top: 50px;
  /* 同時設定top和bottom來填充剩餘垂直空間 */
  bottom: 0;
  /* 同時設定left和right來填充剩餘水準空間 */
  left: 0;
  right: 0;
}