CSS HTML - DIV高度填充剩余空间

Question

所以我有这样的布局:

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占用固定的空间.我希望第三列能够占用其余部分.完成此任务的最佳方法是什么？

Answer 1

你可以做一些疯狂的事情,抛弃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>

Answer 2

这需要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);