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

添加

    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

Answer 2

我不确定这是否正是您想要的，但据我了解，您需要第一个 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（已测试）。