Question

我开始学习Flex，但是大约3个小时后，我从Internet Explorer浏览网站时遇到了问题。

问题是页脚，它应该是粘性页脚，并且有些许问题，但是IE11将页脚垂直推出视口。为什么？

我的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>

我的styles.css

 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; 
   }
   }

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

Answer 1

在IE11中使用flex-direction: column时，您需要在该元素上设置height，因为IE在设置该方案的高度时存在问题（即使您定义了min-height）。如果您给身体height: 100vh，应该可以解决这个问题。

如果您不希望页脚总是显示在底部，则将所有元素包装在div中，并将当前body的flex样式设置为那。这样，您将可以在min-height上使用body，并且仍可以在应用程序包装div上添加确定的height: 100%。

有关所有弹性错误的详细信息，请参见此网站： https://github.com/philipwalton/flexbugs#flexbug-3

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

html,body {
  height: 100vh;
  margin: 0;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

header,
footer {
  flex: 0 0 auto;
}

.main {
  flex: 1 1 auto;
}


/* presentation only */
header,
footer {
  background: salmon;
  padding: 12px;
}

.main {
  background: lightgray;
  padding: 12px;
}

<div class="app">
  <header> header</header>
  <div class="main"> main </div>
  <footer>footer</footer>
 </div>

为什么IE11在flex中将粘性页脚从视口中压出？

1 个答案: