javascript - 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 东西，并使用绝对定位。

参见 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>