页脚始终位于底部，带有“flexbox”（IE 11 上的问题）答案

【问题标题】：Footer always on bottom with "flexbox" (Issue on IE 11)页脚始终位于底部，带有“flexbox”（IE 11 上的问题）
【发布时间】：2015-03-14 18:57:09
【问题描述】：

我正在测试 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 中，页脚保持在内容的正下方。这让我很生气。

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

【问题讨论】：

标签： html css google-chrome internet-explorer flexbox

【解决方案1】：

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

小提琴：http://jsfiddle.net/neh725sz/1/

【讨论】：

非常感谢，确实有效。为什么 IE 不支持最小高度？如果您能解释一下，我将不胜感激。
我现在有另一个问题。当内容太多时，Chrome 无法正确显示。您可以在此处查看：jsfiddle.net/neh725sz/2（仅适用于 Chrome）。
我真的不知道为什么，但似乎 IE 不尊重最小高度。（来源：snipplr.com/view/57936）。从同一个来源，您会找到一种更好的方法，添加 _height: 100vh;反而。这样你就应该只针对 IE。 :) 小提琴：jsfiddle.net/neh725sz/3