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

【问题标题】：Make a div fill the remaining horizontal space of a parent div with a dynamic width使 div 以动态宽度填充父 div 的剩余水平空间
【发布时间】：2015-11-29 00:22:48
【问题描述】：

我正在尝试使 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? */
        }
    }
}

感谢您的问候

【问题讨论】：

@SurajPalwe 如上所述；我正在尝试使用纯 CSS 来实现这一点。
你得到了答案，但这个链接可能对你有帮助 stackoverflow.com/questions/1359025/…

标签： html css

【解决方案1】：

我会用

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

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

如果您需要支持旧版浏览器，请查看它们是否支持 calc 功能：http://caniuse.com/#feat=calc

【讨论】：

我以前从未听说过“计算”。这似乎工作得很好，大多数浏览器都支持它......谢谢你，先生。
不客气 - 很高兴我能告诉你一些新的东西 :)

【解决方案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>

【讨论】：