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

Question

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

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>

Answer 1

IE11 在使用 vh 单元的 flexbox 中存在问题。您可以将 body 高度更改为 100%。

Answer 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 中进行了测试。

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

IE11 calculates the height of parent flex container incorrectly

html

css

flexbox

internet-explorer-11