CSS - 3 div,1,固定大小,其他填充空间

Question

我的网页上有3个div,水平相邻.中间的是固定大小.我希望其他人填满页面上的剩余空间.

我制作了这个片段,这是我的问题的简化版本:

#left {
  background: red;
  float: left;
}
#middle {
  background: blue;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
}
#right {
  background: green;
  float: right;
}

<div id='right'>groen</div>
<div id='left'>rood</div>
<div id='middle'>fixed px blauw</div>

我不能使用百分比,因为中间div有固定的大小.

左右div应各宽度为 (100%-1170px)/2

是否有一种简单的方法可以让css填满额外的空间？或者,如果这不是一个选项,有没有办法以编程方式执行？

Answer 1

演示 - http://jsfiddle.net/mpsrcmgg/1/

您可以为父级和子级使用table布局，但需要更改 html 标记display:tabledisplay:table-cell

.cont {
  display: table;
  width: 100%;
}
.cont div {
  display: table-cell;
}
#left {
  background: red;
}
#middle {
  background: blue;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
}
#right {
  background: green;
}

<div class="cont">
  <div id='right'>groen</div>
  <div id='middle'>fixed px blauw</div>
  <div id='left'>rood</div>
</div>