Div有粘性高度和底部

Question

我希望div能够同时保持顶部和底部，同时对所有方面做出响应。

我有一个由4个div组成的视图，其中3个在响应式布局中运行良好但在一个我有一个聊天窗口（底部/左侧）没有很好的高度响应。 下面你可以在全视图中看到4个div，它看起来像我希望它看起来的方式：

但是一旦我开始，无论是将检查员的一侧向左移动还是在移动设备上查看，聊天窗口都会显示它有一个坚固的高度并在其下面留下空的空间（它至少可以很好地粘在顶部） ：

我似乎无法解决这个问题（现在停留了一个星期）;如果我将当前视口高度（vh）更改为更多，它将仅在屏幕下方消失，如果我使用％，则没有任何反应。这是一段实际的聊天css：

#chatlioWidgetPlaceholder{
  position: absolute;
  z-index: 10000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 5px;
  font-family: input;
}

...但是再一次，vh或％也不能解决这个问题。有谁理解我的问题？

我相信它可能是顶级父div的高度，因为它没有伸展到底部（蓝色标记），因此无法增长：

我将HTML和CSS放在https://jsfiddle.net/3chdp873/2/中 我从其他div中删除了语法以便于阅读，但如果需要，请告诉我：）