IE11 错误计算父 flex 容器的高度答案

【问题标题】：IE11 calculates the height of parent flex container incorrectlyIE11 错误计算父 flex 容器的高度
【发布时间】：2017-01-13 10:41:34
【问题描述】：

我正在尝试使用基于 flexbox 的布局来显示带有粘性页脚的页面。这适用于所有浏览器中的短页面（小于窗口高度）。但是，长页面的相同方法适用于 Firefox，但 IE11 将容器元素减少到子元素的 25% 左右。

示例如下：https://codepen.io/vers/pen/rraKYP

html {
  height: 100%;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
div.container {
  max-width: 600px;
  background-color: #aaa;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 1.5;
}
div.content {
  margin: 8px;
  flex-grow: 1;
}
div.header,
div.footer {
  background-color: black;
  color: #fff;
}

<html>

<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="content">
      <p>...</p>
      <!-- 40 long paragraphs here -->
    </div>
    <div class="footer">Footer</div>
  </div>
</body>

</html>

【问题讨论】：

标签： html css flexbox internet-explorer-11

【解决方案1】：

IE11 在带有 vh 单位的 flexbox 中存在问题。您可以将body 的高度更改为 100%。

【讨论】：

在 Windows 7 上的 IE11 中为我工作
很好奇，现在不行了。但可以删除body中的高度

【解决方案2】：

当您使用height 属性时，某些浏览器会将其解释为限制。或者，使用min-height。

而不是这个：

html {
  height: 100%;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

就用这个吧：

body {
  min-height: 100vh;      
  display: flex;
  flex-direction: column;
}

revised codepen

或者，这也可以：

html {
  display: flex;
  flex-direction: column;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

revised codepen

这两种方法都在 Chrome、FF、IE11 和 Edge 中进行了测试。

【讨论】：