Firefox行为：2个div并排可变宽度

Question

我正试图在css中并排显示2个div。

• 第一个div具有可变宽度（与其包含的图像相同）。
• 第二个必须占用剩余的所有宽度。
• 第二个div包含3个部分：“top”，“middle”和“bottom”，其附加高度为100％。
• 两个div都有100％的高度。

由于this question，我成功地将div放在了一起，当身体有固定的尺寸时，一切都很好。

但是因为我将这个页面嵌入到iframe中，所以我希望div占用所有可用空间。我想避免使用javascript设置身体尺寸......

我决定将此代码添加到正文中：

body {
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

这可以解决Chrome和Safari的问题：图像的高度为100％，定义了宽度，第二个div延伸到占用所有可用空间。 （标题显示在图像上方）

但是当我使用Firefox时，第一个窗格比预期的要大（参见红色矩形）。

我用代码创建了一个小提琴：http://jsfiddle.net/0w0s6z5n/1/

我无法理解为什么行为不同以及我在此页面上做错了什么。有人可以向我解释为什么行为不同，并指出我正确的方向，以成功显示目前在Chrome / Safari上的所有内容。

提前感谢您的帮助。

Answer 1

我不确定这是你想要的，但从我的理解，你需要有一个宽度可变的第一个div，其余部分应该落在原位。

我修改了您的代码： Fiddle here

CSS：

body {
margin: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: orange;
}
.container {
 width: 100%;
 height: 100%;
 background-color: pink;
}
.first {
 position: relative;
 float: left;
 height: 100%;
 background-color: red;
}
.second {
 height: 100%;
 background-color: yellow;
}
.media {
 height: 100%;
}
.caption {
 position: absolute;
 width: 100%;
 height: 15%;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: grey;
}
.top {
 height: 40%;
 background-color: blue;
 }
.middle {
 height: 30%;
 background-color: purple;
 }
.bottom {
  height: 30%;
  background-color: green;
 }

如果你更改.media的宽度，那么其余部分就会出现并且也适用于firefox（已测试）。

Answer 2

添加

    width: 100%;
    height: 100%;

到body（是的，那么简单）!! ：）

问题：容器总是占用父元素的维度，因此如果您打算在%中使用它们，则必须声明它们

css：

body {
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: orange;
    width: 100%; /* added */
    height: 100%; /* added */
}

Fiddle here