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;
}