将 2 个 div 并排放置在嵌入 iframe 的方形容器中

Question

当我想将 2 个 div 并排放置在嵌入方形 iframe 的容器中时，我遇到了 CSS 问题。

问题

• iframe 具有固定的高度和宽度，并且是正方形。但是，它的尺寸是用 javascript 生成的，所以我事先并不知道它们。
• 容器有一个width:100%; height: 100%;。
• 第一个 div 具有可变宽度：它包含一个动态选择的带有 height: 100%; 的图像，并且该图像的高/宽比是可变的（但永远不会
• 我希望第二个 div 占据容器的剩余宽度。

我正在处理容器及其子元素的 CSS。

我的问题是我不能让第二个 div 占据所有剩余空间。

情况

.==iframe==================.
|.======container=========.|
||                 |      ||
||                 |      ||
||      1st div    | 2nd  ||
||                 | div  ||
||                 |      ||
||                 |      ||
||                 |      ||
||                 |      ||
||                 |      ||
|.========================.|
.==========================.
(please, imagine that iframe and container are squared :))

我的结果

在阅读了 StackOverflow 上的大量答案后，我了解到我必须将 display: inline-block; 添加到我的 div 中，这样它们才能并排并且效果很好。我也成功管理了 div 的高度，但我不能让第二个 div 占据所有剩余空间。

我为我所做的事情创建了一个简化的 jsfiddle：

• 我为 body 指定了一个大小来模仿 iframe 的行为。
• 图片和身体尺寸只是示例。

http://jsfiddle.net/e5whkna9/

正如你在小提琴上看到的那样：

• 黑色图像（和第一个 div）占用了它应该占用的空间。
• 黄色 div（第二个）的高度不错，但不会占用所有剩余的宽度。
• 粉红色的 div（容器）没有完全被我的第一个和第二个 div 覆盖。

根据我的发现，如果没有定义宽度的元素，实际上不可能占用“所有剩余空间”。我希望我错过了一些东西，因为在我的 javascript 运行之前我不知道 iframe 的宽度，并且我想避免使用 javascript 设置我的 div 的尺寸。

我在寻找什么

我正在寻找可以帮助我理解和解决此问题的解决方案或指向网站的指针：使第二个 div 适应剩余空间。

感谢您的帮助。

Answer 1

只需从你的侧 div 中取出显示内联块。

  .side {
    height: 100%;
  }
  .first {
    float: left;
    background-color: red;
  }
  .second {
    background-color: yellow;
  }

DEMO