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

Question

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

如何使用纯 CSS 实现这一点？ 我试图实现的目标如下图所示（“可填充空间”）。

以下示例的代码目前为：

#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

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

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