由于这是一个相当流行的问题，我倾向于分享一个使用BFC的很好的解决方案。 代码样例如下。

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

在这种情况下，overflow: auto触发上下文行为，并使右元素仅扩展到可用的剩余宽度，如果.left消失，它将自然扩展到全宽度。对于许多UI布局来说，这是一个非常有用和干净的技巧，但一开始可能很难理解“为什么它有效”。

／* * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

／* * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

您可以使用网格CSS属性，是最清晰，干净和直观的方式结构您的盒子。

#{容器 显示:网格; Grid-template-columns: 100px auto; 颜色:白色; ｝ #{固定 背景:红色; grid-column: 1; ｝ 剩余# { 背景:绿色; grid-column: 2; ｝ < div id = "容器" > < div id = "固定" > < / div >固定 剩余< div id = "剩余" > < / div > < / div >

尝试添加相对位置，删除右边的宽度和浮动属性，然后添加0值的左和右属性。

此外，您还可以添加左距规则，其值基于左元素的宽度(如果您需要在两者之间留出空间，则要加上一些像素)来保持其位置。

这个例子对我来说很有用:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

使用显示:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

我在Boushley的答案中发现的问题是，如果右列比左列长，它就会围绕着左列并继续填充整个空间。这不是我想要的行为。在搜索了许多“解决方案”后，我找到了一个教程(现在链接死了)，如何创建三列页面。

作者提供了三种不同的方法，一种是固定宽度，一种是三个可变列，一种是固定外列，中间可变宽。比我发现的其他例子更加优雅和有效。显著提高了我对CSS布局的理解。

基本上，在上面的简单例子中，将第一列向左浮动，并给它一个固定的宽度。然后给右边的一列留出比第一列稍宽的左距。就是这样。完成了。Ala Boushley的代码:

下面是Stack Snippets & jsFiddle中的一个演示

#{离开 浮:左; 宽度:180 px; ｝ #{正确 margin-left: 180 px; ｝ /*只是为了突出div，例如*/ #left {background-color:粉色;｝ #right {background-color:浅绿色;} <div id="left"> left </div> . <div id="right"> right </div> .

在鲍什利的例子中，左边一列表示右边另一列。只要左列结束，右列就开始再次填充整个空间。在这里，右列只是进一步对齐到页面中，而左列占据了它的大空白。不需要流交互。