所以我的布局如下：
div {
border: 1px solid
}<div id="col_1" style="float:left;width:150px;">1</div>
<div id="col_2" style="float:left;width:100px;">2</div>
<div id="col_3" style="float:left;width:<REMAINING_WIDTH>;">3</div>col_1和col_2占据了固定的空间，我希望第三列占据剩余的空间。如何最好地实现这个目标？
你可以尝试一些疯狂的做法，放弃使用 JavaScript 和不太成熟的 CSS3 技术，使用绝对定位。
参见这个 jsfiddle。 同时，如果能在浏览器缩放时表现良好，则会得到额外加分。
#col_1 {
position: absolute;
top: 0px;
bottom: 0px;
width: 100px;
background-color: #eee;
}
#col_2 {
position: absolute;
top: 0px;
bottom: 0px;
width: 150px;
left: 100px;
background-color: #ccd;
}
#col_3 {
position: absolute;
top: 0px;
bottom: 0px;
left: 250px;
right: 0px;
background-color: #cdc;
}<div id='col_1'>Column 1</div>
<div id='col_2'>Column 2</div>
<div id='col_3'>
Column 3
</div>需要使用Javascript。如果您想让所有3个div填满窗口空间（100%），那么我们需要使用javascript来检测剩余的空间并相应地分配col_3的高度。使用jQuery可以这样做：
var one = $('#col_1').height(),
two = $('#col_2').height(),
remaining_height = parseInt($(window).height() - one - two);
$('#col_3').height(remaining_height);
您已经接受了一个答案，但您可以查看CSS Flexbox，它旨在解决此问题而无需依赖“float：left”技巧。它适用于Chrome、Safari和FF（带有-webkit和-moz前缀）。目前还不适用于IE。
以下是一些快速链接：
http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm
#c1,#c2 {
background-color: red;
float: left;
width: 200px;
}
#c2 {
background-color: green;
}
#c3 {
background-color: yellow;
height: 40px;
overflow: auto;
}
正是溢出使其发挥作用。更多信息：http://www.w3.org/TR/CSS2/visuren.html#block-formatting
这是我关于仅使用CSS的一些想法。我已在Firefox 12、Google Chrome 18、Safari 5.1和IE 7、8、9以及9CV中进行了测试。
.Clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.Clearfix {
display: inline-block;
}
html[xmlns] .Clearfix {
display: block;
}
* html .Clearfix {
height: 1%;
}
#Wrapper {
background-color: #FC20C9;
}
#col_1 {
float: left;
width: 150px;
background-color: #FF0000;
}
#col_2 {
float: left;
width: 100px;
background-color: #00CC00;
}
#col_3 {
width: auto;
float: none;
background-color: #0066FF;
overflow: hidden;
}<div id="Wrapper" class="Clearfix">
<div id="col_1">Lorem ipsum</div>
<div id="col_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="col_3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
enter code here可以使用jQuery计算剩余空间，也可以使用CSS3的弹性盒子填充剩余空间：
http://www.html5rocks.com/tutorials/flexbox/quick/
diagram2 是你想要的情况 - 具有最大“box-flex”的最后一个框将占用剩余空间（默认 box-flex 为 0）
calc 函数。
#col_3 {
width: calc(100%-(100px+150px));
}
#red {
border: 1px solid goldenrod;
}
div {
border: 1px solid;
}<div id="red">
<div id="col_1" style="width:150px; float:left;">1</div>
<div id="col_2" style="width:100px; float:left;">2</div>
<div id="col_3">3</div>
</div>去掉宽度，它应该扩展到填满整个区域。如果需要，可以设置宽度为100%。你应该尝试使用火狐浏览器的Firebug插件。