CSS/HTML 2 列在左列中带有粘性页脚

Question

我想创建这样的东西：

我需要两列：右边的列将是一个滑块，它应该占据页面宽度的50%和height 100% 。 在左侧，内容区域应该滚动（我为此使用了iFrame ）并且页脚应该粘在页面底部（我已经将它定位为绝对的bottom:0 ）。

现在的问题是我不想给内容一个fixed height ，但页脚应该总是200px ，所以如果窗口的高度变小，它应该是这样的：

任何想法我怎么能做到这一点？

Answer 1

CSS：

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

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

HTML

<div>
    <div id = 'left' class = 'column'>
        <div id = 'content'>
        <div id = 'footer'>
    </div>
    <div id = 'right' class = 'column'></div>
</div>

Answer 2

类似于： http : //jsfiddle.net/PFcUa/ ？

我用过计算：

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

所以它只适用于 ie9+