三列布局，第三列宽度自适应，且位置固定。

Question

我想要做一个简单的布局：

1. 3列，左右列位置固定，因为当向下滚动时，左右列应保持不动
2. 我们知道左列宽度为 200px
3. 我们知道中间列宽度为 400px
4. 我们不知道右列宽度，它应该是流体的（即填充屏幕剩余宽度或为零）

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

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

我的最后一个选择是使用jQuery。但我不想在布局上除非真的必要才去涉及它。

谢谢。

- HP.

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

- Salman A

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/

- charlietfl

---

我看了你的代码，没有看到任何蓝色？我错过了什么吗？ - HP.

是的，你只是在显示模式下做了同样的事情。http://jsfiddle.net/Endt7/3/show/ - charlietfl