所以我有这样的布局：
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 jquery html css
你可以做一些疯狂的事情，放弃 javascript 和尚未完全准备好用于黄金时段的 CSS3 东西并使用绝对定位。
见this 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 的东西。我已经在 FF12、GC18、SAF5.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）
【讨论】：
如果您针对最新的浏览器，您可以使用 HTML5 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%。您应该查看 firefox 的 firebug 插件。
【讨论】：
将所有三个 div 放在一个容器中，给 col 1 和 2 固定宽度，并将第三个设置为 auto。
【讨论】：