CSS - 3 个 div，1 个固定大小，其他填充空间答案

【问题标题】：CSS - 3 div's , 1 with fixed size, others fill spaceCSS - 3 个 div，1 个固定大小，其他填充空间
【发布时间】：2014-12-24 22:39:56
【问题描述】：

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

我做了这个 sn-p 这是我的问题的简化版本：

#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 填满额外的空间？或者如果这不是一个选项，是否有办法以编程方式进行？

【问题讨论】：

您必须在问题中包含所有代码，这就是为什么您不能只发布 JSFiddle。不要发布虚假代码来发布问题..
Three column layout: fixed width center with fluid side columns 的可能重复项
使用表格布局并做这样的事情jsfiddle.net/mpsrcmgg/1
@Bartdude 谢谢，那个链接看起来很有帮助 :) 如果那个帖子解决了我的问题，我会在 cmets 中告诉你，这确实是重复的
@VitorinoFernandes，你的 JSFiddle 是我问题的确切答案：)

标签： html css

【解决方案1】：

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

您可以将table 布局display:table 用于父级，display:table-cell 用于子级，但您需要更改 html 标记

.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>

【讨论】：

【解决方案2】：

尝试使用表属性：
HTML

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

CSS

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

DEMO

【讨论】：

【解决方案3】：

试试这个： CSS

#left {
  background: red;
  float: left;
  width: calc(50% - 250px); /* <-- added this line */
}
#middle {
  background: blue;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
}
#right {
  background: green;
  float: right;
  width: calc(50% - 250px); /* <-- and this line */
}

HTML

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

DEMO

【讨论】：