Question

我在Firefox和IE中完全可以使用以下布局： Firefox

不幸的是，它在Chrome中相当破碎，即深蓝色容器已折叠，即使其高度为其父级的100％： Chrome

我试过this approach，但没有运气。任何想法如何在Chrome上修复此问题而不在其他浏览器中破坏它？

html,
body {
  height: 97%;
  margin: 0;
  padding: 0;
}

div {
  border: 10px dotted teal;
}

.container {
  display: flex;
  border-color: tomato;
  height: 100%;
}

.row {
  flex-flow: row;
}

.column {
  flex-flow: column;
}

.item1 {
  flex: 1;
}

.item2 {
  flex: 2;
}

.item3 {
  flex: 3;
}

.c1 {
  border-color: gold;
}

.c2 {
  border-color: darkblue;
}

<div class="container">
  <div class="item3">
    <div class="container column c2">
      <div class="item1 c1"></div>
      <div class="item3"></div>
    </div>
  </div>
  <div class="item1 c1"></div>
  <div class="item2"></div>
</div>

Answer 1

问题是：

我在Firefox和IE中完全可以使用以下布局。不幸的是它在Chrome中被破坏了，即深蓝色即使容器的高度为其父级的100％，容器也会折叠。

实际上，可以提出一个相反的论点：Chrome使它正确，而Firefox和IE则被“破坏”。

首先，这是解决方案：

.item3 { height: 100%; }

现在让我们看一下您的文档结构和应用的高度：

<html> <!-- height: 97% -->
<body> <!-- height: 97% -->
<div class="container"> <!-- height: 100%; -->
    <div class="item3"> <!-- height: ?? -->
        <div class="container column c2"> <!-- height: 100% ; this is the collapsed box -->
                       ...
                       ...
                       ...

根据CSS specification，当使用百分比设置元素的height时（就像使用.container一样），父元素必须也有明确的高度。在引用折叠的div时，其父级（.item3）没有定义的高度。

来自spec：

＆lt; percentage＆gt;
百分比是根据身高计算的   生成的框的包含块。如果高度   包含块没有明确指定（即，它取决于   内容高度），这个元素并不是绝对定位的   值计算为'auto'。

自动
高度取决于其他属性的值。

就height属性而言，从这个示例中可以看出Chrome将“包含块”定义为“父”，而Firefox和IE将“包含块”定义为“祖先”，或者他们尊重flex高度作为百分比高度的参考。

因此，由于带有深蓝色边框的div（.container column c2）没有内容，并且其父级没有指定的高度，因此没有高度，并且该框在Chrome中折叠。

但是，通过指定.item3的高度（即折叠框的父级），高度适用于所有浏览器。

DEMO

<强>更新

更多详情：

Heights rendering differently in Chrome and Firefox

在Chrome

1 个答案: