javascript - 3列，第三列具有流体宽度，固定位置

Question

我想做这个简单的布局：

1. 3 列左右位置：固定，因为向下滚动时，左右应该保持静止
2. 我们知道左栏width = 200px
3. 我们知道中间栏width = 400px
4. 我们不知道正确的列宽，它应该是流动的（即填写屏幕宽度的其余部分或零）

这是我的示例（但col3 的宽度为 100px）。所以问题是如何修复 csscol3以使其流畅但仍然保留position:fixed？

http://jsfiddle.net/Endt7/1/

我的最后一个选择是使用 jQuery。但我不想碰它，除非真的需要布局。

谢谢。

Answer 1

对于绝对/固定定位元素，宽度是左右的函数。因此，left: 600px; right: 0;在第三列设置 ，浏览器将确定宽度。这就对了。这是修改后的 CSS，为了保持一致而进行了一些更改：

.col1 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    background: red;
}
.col2 {
    margin-left: 200px;
    width: 400px;
    height: 100%;
    background: green;
}
.col3 {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 600px;
    right: 0;
    background: blue;
}

演示在这里

Answer 2

可以使用float:left左列和中间列的绝对位置或绝对位置并设置margin-left为等于它们的组合宽度。

.col1 {
    background: red;
    float:left;
    width: 200px;    
    height:100%
}

.col2 {
    background: green;    
    float:left;
    width: 400px;
    height:100%

}

.col3 {
    background: blue;
    margin-left:600px;

}

演示：http: //jsfiddle.net/Endt7/3/