html - Firefox 行为 : 2 divs side by side with variable width

Question

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

• 第一个 div 具有可变宽度(根据它包含的图像)。
• 第二个必须占据所有剩余的宽度。
• 第二个 div 包含 3 个部分:“顶部”、“中间”和“底部”，其添加的高度为 100%。
• 两个 div 的高度均为 100%。

感谢this question，我成功并排放置了div当 body 具有固定尺寸时，一切都很好。

但由于我会将此页面嵌入到 iframe 中，所以我希望 div 占据所有可用空间。我想避免使用 javascript 设置主体尺寸...

我决定将这段代码添加到主体中:

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

这在 Chrome 和 Safari 上起到了作用:图像有一个 100% 的高度，它定义了它的宽度，第二个 div 拉伸(stretch)直到它占据所有可用空间。 (标题显示在图像上)

但是当我使用 Firefox 时，第一个 Pane 比预期的要大(见红色矩形)。

我用代码创建了一个 fiddle :http://jsfiddle.net/0w0s6z5n/1/

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

预先感谢您的帮助。

Answer 1

添加

    width: 100%;
    height: 100%;

到 body(是的，就这么简单)!! :)

问题:容器总是采用父元素的维度，因此如果您打算在 %

中使用它们，则必须声明它们

样式:

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

Fiddle here