html - 页脚始终位于底部，带有 "flexbox"(IE 11 上的问题)

标签 html css google-chrome internet-explorer flexbox

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

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

最佳答案

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

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

关于html - 页脚始终位于底部，带有 "flexbox"(IE 11 上的问题)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27979416/