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);
}