让 div 填满剩余空间答案

【问题标题】：make div fill up remaining space让 div 填满剩余空间
【发布时间】：2017-09-15 15:38:46
【问题描述】：

我有 3 个 div 包含在一个外部 div 中。我通过将它们向左浮动来水平对齐它们。 div3 向右浮动

<div id="outer">

  <div id="div1">always shows</div>
  <div id="div2">always shows</div>
  <div id="div3">sometimes shows</div>
</div>

div1 和 div3 具有固定大小。如果 div3 被忽略，我希望 div 2 填满剩余空间。我该怎么做？

【问题讨论】：

标签： html css

【解决方案1】：

这样的事情呢？ https://jsfiddle.net/Siculus/9vs5nzy2/

CSS：

#container{
    width: 100%;
    float:left;
    overflow:hidden; /* instead of clearfix div */
}
#right{
    float:right;
    width:50px;
    background:yellow;
}
#left{
    float:left;
    width:50px;
    background:red;
}
#remaining{
    overflow: hidden;
    background:#DEDEDE;
}

主体：

<div id="container">
    <div id="right">div3</div>

    <div id="left">div1</div>

    <div id="remaining">div2, remaining</div>
</div>

【讨论】：

jsfiddle 链接似乎死了
我重新调整了它，因为该解决方案也帮助了我。 jsfiddle.net/Siculus/9vs5nzy2

【解决方案2】：

这是一种使用display: table;https://jsfiddle.net/sxk509x2/的技术

浏览器支持（即 11+）：http://caniuse.com/#feat=css-table

HTML

<div class="outer">
    <div class="static pretty pretty-extended">$</div>
    <input class="dynamic pretty" type="number" />
    <div class="static pretty">.00</div>
</div>

CSS

.outer{
    width:300px;
    height:34px;
    display:table;
    position: relative;
    box-sizing: border-box;
}
.static{
    display:table-cell;
    vertical-align:middle;
    box-sizing: border-box;
}
.dynamic{
    display:table-cell;
    vertical-align:middle;
    box-sizing: border-box;
    width: 100%;
    height:100%;
}
.pretty{
    border: 1px solid #ccc;
    padding-left: 7px;
    padding-right: 7px;
    font-size:16px;
}
.pretty-extended{
    background: #eee;
    text-align:center;
}

包含“pretty”的类不需要完成您正在尝试做的事情。我只是为了外观而添加它们。

【讨论】：

【解决方案3】：

你不需要浮动#div2，它会自动填满剩余空间。

如果你想要边框/填充，你应该给#div2一个子元素。

【讨论】：