javascript - 3 列，第三列具有可变宽度，固定位置

Question

我想做这个简单的布局:

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

这是我的示例(但col3 的宽度为 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