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）。

因此，換句話說，我希望它使紅色條緊靠中間的黑色條，同時不影響其大小（無論屏幕大小如何）。

從我的圖像中可以看出，這是行不通的，因為紅色條沒有與邊距的邊緣相抵。 我已經嘗試過寬度自動，初始和繼承等功能。 什么都沒用。

編輯：

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