页脚总是在底部 "flexbox" （IE 11 上的问题）

Question

我正在测试 flexbox 的一些功能。所以，我尝试用 flex 将网页的页脚放在底部。

这是测试和代码（使用 IE 测试以查看问题）： https://jsfiddle.net/3bcw8zL2/

html:

<body>
<header>
  <h1>Header</h1>
</header>

<main>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
  
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  
</main>
</body>

<footer>
  <h1>Footer</h1>
</footer>

Css:

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

main {
  flex: 1 0 auto;
}

header, footer {
  background: #ccc;
  h1 {
    padding: 10px;
    margin: 0;
  }
}

与 Chrome 和 Mozilla 完美配合，但在 IE 11 中，页脚保持在内容的正下方。这让我很生气。

你能帮我解决这个问题吗？

Answer 1

将 height: 100vh; 添加到 CSS 中的 body-tag。

Fiddle: http://jsfiddle.net/neh725sz/1/

页脚总是在底部 "flexbox" （IE 11 上的问题）

Footer always on bottom with "flexbox" (Issue on IE 11)

html

css

internet-explorer

google-chrome

flexbox