html - CSS 三列调整大小问题

Question

我有一个目前看起来像这样的网络布局:

黑色列(中间列)具有固定宽度 (728px)。这是它的 CSS:

width: 728px;
margin-left: auto;
margin-right: auto;

然后，我在屏幕的相对两侧有两个红色条。例如，左侧栏的 CSS 是:

background: red;
height: 100%;
float: left;
width: 300px;

...在右边:

background: red;
height: 100%;
float: right;
width: 300px;

但是，我想让红色条根据屏幕尺寸自动调整宽度。然而，与此同时，我希望它不影响中间的黑条(728px)。

换句话说，我希望红色条与中间的黑色条对齐，同时不影响它的大小(无论屏幕大小如何)。

正如我在图片中看到的那样，这是行不通的，因为红色条没有碰到边距的边缘。我已经尝试过诸如 width auto、initial 和 inherit 之类的东西。没有任何效果。

编辑:

这是 HTML 结构:

<div id="container">
    <div id="left-bar">
    </div>
    <div id="right-bar">
    </div>
    <div id="middle-column">
    </div>
</div>

容器的 CSS 如下:

width: 100%;
height: 100%;

Answer 1

您可以在左右栏上使用 CSS calc():

#right-bar {
    width: calc(50% - 364px);
}

fiddle :http://jsfiddle.net/K8qba/