html - 将宽度 100% 设置为两个固定宽度 div 中间的 div，全部在另一个 100% 宽度 div 内

Question

这就是问题所在。

我有一个负责宽度和高度的 div。在它里面我有另外两个具有固定宽度的大小，一个在左边，另一个在右边。

我需要另外一个两个留在这两个中间，宽度始终填充左边一个和右边另一个之间的距离。

我们是图片，顶部的 div 是我现在的样子，底部的是目标。

可以看到中心 div 已经具有响应高度，我找不到适合宽度的任何内容。

这些是 CSS

父级

#full-size{
  height:100%;
  width:100%;
  overflow:hidden;
  border: 1px solid #000;
  top:5px;
  position:relative; 
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#FFF;
}

左右div

#left-content {
  height:100%;
  width:200px;
  border:1px solid #000;
  overflow:auto;
  float:left;
    position:relative; 
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#222;
}

#right-content {
  height:100%;
  width:200px;
  border:1px solid #000;
  overflow:auto;
  float:right;
    position:relative; 
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#222;
}

我现在在中心 div 中拥有的内容

#center-content {
  height:100%;
  border:1px solid #000;
  overflow:auto;
  margin-left:5px;
  margin-right:5px;

  display:inline-block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#222;

}

希望有可能实现这一目标。

Answer 1

使用这个:

<div id='container'>
    <div id='right'>
        Right Fixed Width Col
    </div>
    <div id='left'>
        Left Fixed Width Col
    </div>
    <div id='middle'>
        Middle Responsive Width Col
    </div>
</div>

和 CSS:

#container {
    overflow: hidden;
}
#right {
    float: right;
    width: 180px;
    background-color:red;
}
#left {
    float: left;
    width: 180px;
    background-color:red;
}
#middle {
    margin: 0 180px;
    background-color:blue;
}

<强> >>> JSFiddle Sample