Html 为什么IE11在flex中将我的粘性页脚推出视口？

我开始学习Flex，但大约3个小时后，我从Internet Explorer查看我的网站时遇到了问题

问题是页脚，它应该是一个粘性的页脚，它有点粘，但IE11将页脚垂直推出视口。为什么?

My index.html

<div class="app">
<div class="header">
<a href="#" class="logo">Sitename</a>
<div class="nav">
<a href="#">About</a>
</div>
</div>
<div class="main">
<p>Ingen content.</p>  
</div>
</div>
<div class="footer">
Copyright &copy; <a href="http://#">Sitename</a> av @<a href="#">Site</a>
</div>

---

我检查了几个网站，包括stackoverflow，这段代码似乎是正确的，但由于某些原因，它没有按照IE11中的预期呈现页面（将粘性页脚从垂直视口中推出）。

在IE11中使用

flex direction:column

时，您需要在该元素上设置

高度

，因为IE在该场景中设置高度有问题（即使您定义了

最小高度

）。如果你给你的身体一个

高度：100vh

，那应该可以修复它

如果不希望页脚在底部始终可见，则需要将所有元素包装在一个div中，并将当前的

body

flex样式设置在该div上。这样，您就可以在

主体上使用
min height
，并在应用程序包装器div上添加一个明确的
height:100%

有关所有flex Bug的更多详细信息，请访问此网站：

下面是一个最简单的示例片段。通常，我没有将flex布局直接放在html或body元素上。不确定这是否会导致问题。与您的结构最大的不同是，我使用
.app
包装所有内容，包括页脚，这样我就可以对其应用flex样式，并使用
.main
作为将页脚推到底部的灵活元素


html，正文{
高度：100vh；
保证金：0；
}
.app{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
标题，
页脚{
flex:0自动；
}
梅因先生{
flex:1自动；
}
/*仅演示文稿*/
标题，
页脚{
背景：鲑鱼；
填充：12px；
}
梅因先生{
背景：浅灰色；
填充：12px；
}

标题
主要
页脚
问题可能仅仅是
正文默认设置了边距，因此如果将其设置为
0
，则不应存在边距scrollbar@Scrimothy主体没有边距或填充，我使用了CSS reset 2。你还有其他想法吗？哦，当在IE11中使用
flex direction:column
时，你需要在该元素上设置
height
，因为IE在该场景中设置高度有问题（即使你定义了
min height
）。如果你给你的身体一个
高度：100%
，那应该可以修复它。html，正文已设置为高度：100%，正文也设置为最小高度：100vh。不起作用。你能给我一个例子，说明你的意思是我应该如何用上面的代码实现这个吗？
 html, body {
 height: 100%;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 }
 body {
 box-sizing: border-box;
 min-height: 100vh;
 width: 100%;
 background-color: #0d0d0d;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: column;
 -moz-flex-direction: column;
 -ms-flex-direction: column;    
 flex-direction: column;
 color: #fdfdfd;
 font-family: 'Open Sans', sans-serif;
 }
 *, *:before, *:after {
 box-sizing: inherit;
 }
 .app {
 -webkit-box-flex: 1 0 auto;
 -moz-box-flex: 1 0 auto;
 -webkit-flex: 1 0 auto;
 -ms-flex: 1 0 auto;
 flex: 1 0 auto;
 }

 .header {
 padding-top: 8px;
 background: #333;
 height: 40px;
 }

 .logo {
 font-family: 'Black Ops One', cursive;
 color: #ffffff;
 text-transform: uppercase;
 text-decoration: none;
 font-weight: 400;
 font-size: 28px;
 margin-left: 25px;
 transition: all 0.1s ease-in-out;
 }
 .logo:hover {
 letter-spacing: 2px;
 }
 .nav {
 float: right;
 display: inline-block;
 margin-right: 25px;
 padding-top: 5px;
 }
 .navlink {
 text-decoration: none;
 font-size: 14px;
 color: white;
 padding-left: 10px;
 font-family: 'Ubuntu', sans-serif;
 }
 .footer {
 /*position: absolute;
 bottom: 0;
 left: 0;
 right: 0;*/
 -webkit-flex-shrink: 0;
 -moz-flex-shrink: 0;
 -ms-flex: 0;
 flex-shrink: 0;
 text-align: center;
 padding-bottom: 10px;
 font-size: 14px;
 font-family: 'Ubuntu', sans-serif;
 }

 .main {
 text-align: left;
 }

 .aside-1 {
 background: gold;
 }

 .aside-2 {
 background: hotpink;
 }

 @media all and (min-width: 600px) {
 .aside {
 -webkit-box-flex: 1 0 0;
 -moz-box-flex: 1 0 0;
 -webkit-flex: 1 0 0;
 -ms-flex: 1 0 0;
 flex: 1 0 0;
 }
 }

 @media all and (min-width: 800px) {
 .main    {
 -webkit-box-flex: 3 0px;
 -moz-box-flex: 3 0px;
 -webkit-flex: 3 0px;
 -ms-flex: 3 0px;
 flex: 3 0px;
 }
 .aside-1 { 
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1; 
  } 
  .main    { 
   -webkit-box-ordinal-group: 2;
   -moz-box-ordinal-group: 2;
   -ms-flex-order: 2;
   -webkit-order: 2;
   order: 2; 
   }
   .aside-2 { 
   -webkit-box-ordinal-group: 3;
   -moz-box-ordinal-group: 3;
   -ms-flex-order: 3;
   -webkit-order: 3;
   order: 3; 
   }
  .footer  { 
   -webkit-box-ordinal-group: 4;
   -moz-box-ordinal-group: 4;
   -ms-flex-order: 4;
   -webkit-order: 4;
   order: 4; 
   }
   }