3个div占据父级的所有高度，第一个和最后一个div变量高度

要实现3个div占据父级的所有高度，且第一个和最后一个div的高度可变，可以使用CSS的Flexbox布局来实现。

首先，在父级容器上应用Flexbox布局，可以通过设置父级容器的display属性为flex来实现，如下所示：

.parent-container {
  display: flex;
}

接下来，为每个子div设置flex属性，使它们占据父级容器的所有高度。同时，将第一个和最后一个div的高度设置为auto，即可实现它们的高度可变，如下所示：

.child-div {
  flex: 1;
}

.child-div:first-child,
.child-div:last-child {
  height: auto;
}

这样，三个div就会占据父级容器的所有高度，且第一个和最后一个div的高度可变。

关于Flexbox布局的更多详细信息，可以参考腾讯云的Flexbox布局介绍页面：Flexbox布局介绍