Html 带粘性页脚的三列动态css布局

我正在尝试用CSS实现动态的三列布局，带有粘性页脚

我已经将一个半工作静态解决方案上传到codepen，以说明我的目标（）

我想问题出在我的包装容器的某个地方

.main{
  min-height: 100%;
  margin-bottom: -4em;
  width: 100%;
  float: left;
  display: inline-block;
  position: relative;
  z-index: 1;
  height: 600px;
  overflow: hidden;
}

页脚应始终固定在底部-用户无需滚动查看页脚

无论内容如何，这三个立柱都应自动调整其高度并填充页脚的空间

<中柱中的圆圈应该占用尽可能多的空间，以便女巫想使用MealAvies。

我无法强制三根立柱高度相等/自动拉伸到可用高度的延伸

我如何解决这个问题