Javascript 如何让一个容器填满另一个容器留下的空间？

我已经试了好几个小时了，但我似乎没能把这个做好（对不起，我在CSS方面不是很好）

我的目标是有一个容器，它将显示在窗口的整个宽度上

• 父容器的高度为200px

此容器有2个子容器，它们应在同一行中相邻放置

• 右侧容器具有固定宽度（与高度相同，因此为200px）
• 左侧容器的宽度应为=（当前窗口大小-200px）

我试着像这样使用calc：

width: -webkit-calc(100% - 200px);

但它总是给我一个-100%的宽度

---

两个容器都显示图像旋转木马，但为了简单起见，我试图使它与单个图像一起工作

*将右图像装配到右容器应该很简单，我已经设法使左图像扩展到100%宽度或100%高度，这取决于哪个更小。另外，我使用Java脚本将图像居中

我认为使用CSS可以很容易地做到这一点，但也许我还需要使用Java脚本在每次大小改变时重新计算宽度

这里有一张图片说明了我正在努力实现的目标。（）

Flexbox FTW

• 将父容器上的

  display

  设置为

  flex

• 将左侧容器上的

  宽度设置为
  100%

• 将右侧容器上的

  width

  设置为

  200px

现场演示

.container{
宽度：100%；
高度：200px；
显示器：flex；
边框：2件纯蓝；
}
.左{
宽度：100%；
背景色：#185218；
}
.对{
宽度：200px；
背景色：#8c1919；
}
.左，.右{
身高：100%；
颜色：白色；
字体系列：无衬线；
字体大小：32px；
文本对齐：居中；
}

可变宽度
固定宽度

您可以始终在固定宽度容器上使用

float:right

。 只需确保先放置固定宽度容器，然后将可变宽度容器的

右边距设置为
200px

请点击此处：

HTML:

或者，您可以使用Flexbox，如@Gothdo所建议的：）

一个很好的CSS参考和示例网站是

希望这有帮助
 只需将子元素的
display
规则设置为
inline block
，然后使用
calc
方法进行计算

这里有一个例子


body{margin:0；}
.集装箱{
高度：200px；
宽度：100%；
框大小：边框框；
字号：0；
}
.左，.右{
显示：内联块；
}
.左{
宽度：计算（100%-200px）；
最小高度：200px；
背景颜色：绿色；
}
.对{
背景色：番茄；
身高：继承；
宽度：200px；
}
您可以使用
表
属性来解决此问题

此解决方案是跨浏览器的，但
flexbox
和
css-calc
不是

HTML:

<div class="container">
    <div class="left-div">left</div>
    <div class="right-div">right</div>
</div>

工作示例：
浮动在过去十年中非常常见！这个主意太棒了！
.parent {
  width: 100%;
  height: 200px;
  border: 1px solid blue;
  color: white
}

.vari-width {
  width: auto;
  margin-right: 200px;
  background: green;
  height: 100%;
}

.fixed-width {
  float: right;
  width: 200px;
  height: 100%;
  background: red;
}

<div class="container">
    <div class="left-div">left</div>
    <div class="right-div">right</div>
</div>

.container{
    width: 100%;
    height: 200px;
    display: table;
}

.container > div{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.container .right-div{
    width: 200px;
    background: #ddd;
}
.container .left-div{
    background: #ccc;
}