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

Question

我想做这个简单的布局：

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

这是我的样本（但 col3＆＃39; s宽度为100px ）。所以问题是如何修复col3的CSS以使其流畅但仍保留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;
}

Demo here

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;

}

DEMO：http://jsfiddle.net/Endt7/3/