兩個並排的容器，一個拉伸

Question

我正在嘗試實現以下布局：兩個並排容器，第一個容器具有固定寬度，第二個容器延伸整個屏幕長度。 第二個容器有一個帶有邊距的子容器，它會拉伸其父容器的整個長度。

我通過以下方式實現了這一點，但它看起來很笨拙，我認為有更好的方法，但我正在畫一個空白。 如果存在，您能否提供更好的解決方案？

http://jsfiddle.net/7Ack4/

CSS：

 .c1 {
        display: table;
        width:100%;
        height:40px;
        border:2px solid black;
    }

.c1> div:first-child  {
    display:table-cell;
    width:100px;
    background-color:blue;
}

.c1> div:last-child  {
    display:table-cell;
}

.c1 > div:last-child > div {
    position:relative;
    height:100%;
    width:100%
}

.c1> div:last-child > div > div {
    position:absolute;
    left:5px;
    right:5px;
    bottom:5px;
    top:5px;
    background-color:red;
    border-radius:10px;
}

HTML：

<div class="c1">
    <div>
    </div>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</div>

Answer 1

我認為display: table-cell不適合在這里使用。

我將margin-left與float屬性結合使用。

檢查這個小提琴

.c1 {
    width:100%;
    height:40px;
    border:2px solid black;
}
.c1> div:first-child {
    width:100px;
    background-color:blue;
    height: 100%;
    float: left;
}
.c1> div:last-child {
    margin-left: 100px;
    height: 100%;
}
.c1 > div:last-child > div {
    position:relative;
    height:100%;
    width:100%
}
.c1> div:last-child > div > div {
    position:absolute;
    left:5px;
    right:5px;
    bottom:5px;
    top:5px;
    background-color:red;
    border-radius:10px;
}

Answer 2

5 年內發生了多少變化，真是太瘋狂了。 如果有人發現了這一點，這里是截至 2020 年 4 月 2 日（冠狀病毒年）的最簡單解決方案。 自從 flexbox 出現以來，這就是你所需要的。

HTML

<div class="parent">

  <div class="child-1">
  </div>

  <div class="child-2">
  </div>

</div>

CSS

.parent{
  background:blue;
  padding:2px;
  height:40px;
  display:flex;
}
.child-1{
  flex-basis:100px;
  background:green;
}
.child-2{
  background:yellow;
  flex-grow:1;
}

這是一個代碼筆。 https://codepen.io/hundredbillion/pen/mdJgYja