使用动态宽度填充父div的剩余水平空间

Question

我试图让div填充父div的剩余水平空间，该div具有动态宽度（基于屏幕宽度）。

如何使用纯CSS实现这一目标？ 我试图实现的目标如下图所示（＆＃39; Fillable space＆＃39;）。

以下示例的代码目前为：

#wrap {
    width: 100%;
    float: left;

    #container {
        width: 100%;
        padding: 0px 30px;

        #static-div {
            width: 60px;
            height: 60px;
        }

        #fillable-space {
            /* What would my code be to fill the remaining space? */
        }
    }
}

谢谢你

Answer 1

我会用

width: calc( 100% - 60px );
float:left;

就像我在这个小提琴中所做的那样：http://jsfiddle.net/74ovL80s/

如果您需要支持旧浏览器，请查看此处是否支持calc函数：http://caniuse.com/#feat=calc

Answer 2

如果您需要支持不支持css calc的浏览器，例如IE8，您可以这样做。

#wrap {
  height: 100px;
  width: 100%;
}
 #container {
    width: 80%;
    padding: 0px 30px;
    height: 70px;
    background: grey;
}
#static-div {
    width: 60px;
    height: 60px;
    background: red;
    float: left;
}
#fillable-space {
  height: 60px;
  background: blue;
  margin-right: 60px;
}

<div id="wrap">
    <div id="container">
        <div id="static-div">
            
        </div>
        <div id="fillable-space">
        </div>
    </div>
</div>