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

Question

我已经尝试了几个小时，但我似乎无法做到这一点（抱歉我的CSS不太好。）

我的目标是让一个容器显示在窗口宽度的整个宽度上。

• 父容器的高度为200px。

此容器有两个子容器，它们应该在同一行中彼此相邻放置。

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

我尝试使用这样的计算：

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

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

两个容器都显示图像轮播，但为了简单起见，我试图让它与单个图像一起使用。

*将正确的图像安装到正确的容器应该是微不足道的，并且我已经设法使左图像扩展到宽度100％或高度100％，具体取决于哪个更小。另外，我使用Java脚本将图像置于中心位置。

我认为这可以通过CSS轻松完成，但也许我需要使用Java脚本来重新计算每次大小更改时的宽度？

这是一张图片，展示了我正在努力实现的目标。 （https://sketch.io/render/sk-733fbc35d88d981f5b7037c514ab2307.jpeg）

Answer 1

您可以针对此问题使用css calc属性。

此解决方案是跨浏览器，但<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; } 不是。

HTML：

{{1}}

CSS：

{{1}}

工作示例：https://jsfiddle.net/en2qt3L5/3/

Answer 2

Flexbox FTW！

• 将父容器上的display设置为flex。
• 将左侧容器上的width设置为100%。
• 将右侧容器上的width设置为200px。

现场演示

.container {
  width: 100%;
  height: 200px;
  display: flex;
  border: 2px solid blue;
}
.left {
  width: 100%;
  background-color: #185218;
}
.right {
  width: 200px;
  background-color: #8c1919;
}
.left, .right {
  height: 100%;
  color: white;
  font-family: sans-serif;
  font-size: 32px;
  text-align: center;
}

<div class="container">
  <div class="left">Variable width</div>
  <div class="right">Fixed width</div>
</div>

Answer 3

您始终可以在固定宽度容器上使用float: right。 只需确保放置固定宽度的容器首先，然后将可变宽度容器的margin-right设置为200px。

JSFiddle：https://jsfiddle.net/7j8uh0td/

HTML：

<div class="parent">
  <div class="fixed-width">
    ...
  </div>
  <div class="vari-width">
    ...
  </div>
</div>

CSS：

.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;
}

或者，您可以使用Flexbox - 就像@Gothdo建议的那样：）

一个很棒的网站用于参考和CSS的例子（我今天仍然使用它）是http://learnlayout.com/

希望这有帮助！

Answer 4

只需将子元素的display规则设置为inline-block，然后使用calc方法进行计算。

这是一个例子。

＆＃13;

＆＃13;

body { margin: 0; }

.container {
  height: 200px;
  width: 100%;
  box-sizing: border-box;
  font-size: 0;
}

.left, .right {
  display: inline-block;
}

.left {
  width: calc(100% - 200px);
  min-height: 200px;
  background-color: green;
}

.right {
  background-color: tomato;
  height: inherit;
  width: 200px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;