Question

我想创建这样的东西：

Image 1 http://i59.tinypic.com/egd8a9.png

我需要两列：右侧的列将是一个滑块，应该占据页面宽度的50%和100%的{{1}}。在左侧，内容区域应该滚动（我正在使用height）并且页脚底部的页脚应该是粘性的（我已将其定位为iFrame的绝对值）。

现在问题是我不想给内容bottom:0，但页脚应该始终为fixed height，所以如果窗口的高度变小，它应该如下所示：

Image 2 http://i61.tinypic.com/10ero1x.png

我有什么想法可以做到这一点？

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/？

我用过calc：

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

所以它只适用于ie9 +

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

2 个答案: