我正在尝试使用带粘性页脚的CSS实现动态三列布局。
我已经向codepen上传了一个半工作的静态解决方案来说明我所追求的目标（http://codepen.io/anon/pen/ojYWzO）。
我想问题就在于我的包装容器......
.main{
min-height: 100%;
margin-bottom: -4em;
width: 100%;
float: left;
display: inline-block;
position: relative;
z-index: 1;
height: 600px;
overflow: hidden;
}
页脚应始终粘在底部 - 用户不需要滚动查看页脚。
三个列应自动调整其高度，并将空间填充到页脚，无论内容如何。
对于我想要使用媒体查询的女巫，中间列中的圆圈应该占用尽可能多的空间。
我无法强制三列高度相等/自动拉伸到可用高度的延伸。
我该如何解决这个问题？