CSS让子元素div的高度填满父容器的剩余空间

可以使用CSS的flexbox来实现让子元素div的高度填满父容器的剩余空间。具体实现方式如下：

1. 父容器设置为display: flex;和flex-direction: column;，使子元素垂直排列。
2. 子元素设置为flex-grow: 1;，使其占据父容器剩余的空间。

代码示例：

<div style="display: flex; flex-direction: column; height: 300px;">
  <div style="background-color: red;">顶部内容</div>
  <div style="background-color: blue; flex-grow: 1;">占据剩余空间的内容</div>
  <div style="background-color: green;">底部内容</div>
</div>

在上面的示例中，蓝色的子元素div会自动占据父容器剩余的空间，从而达到让子元素div的高度填满父容器的剩余空间的效果。