CSS/HTML 2列，左列有粘性页脚

我想创建如下内容：

我需要两列：右边的列是一个滑块，它应该占页面宽度的50%，占高度的100%。在左边，内容区域应该滚动（我使用的是

iFrame

），页脚应该粘在页面底部（我使用

bottom:0将其定位为绝对）

现在的问题是，我不想给内容一个
固定高度
，但页脚应该始终是
200px
，因此如果窗口的高度变小，它应该如下所示：



有什么办法吗？
CSS:

column {
    display:inline-block;
    vertical-align:top;
}

#left, #right{width: 50%;} /* more or less depends on the margin */
#footer{height:200px;}

HTML


类似于：

我使用了calc：

.cutter {
    background: orange;
    position: relative;
    overflow-y: scroll;
    height: calc(100% - 200px);
}

因此，它只适用于ie9+
你能发布你的代码吗？还是做一个但您无法看到结果，因为我使用了两个外部文件。但至少你能更好地看到代码…希望这能有所帮助。像这样：啊！完美的工作得很有魅力！非常感谢，乔纳斯！
.cutter {
    background: orange;
    position: relative;
    overflow-y: scroll;
    height: calc(100% - 200px);
}