Почему IE11 выталкивает мой липкий нижний колонтитул из области просмотра в flex?

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

При использовании flex-direction: column в IE11 вам необходимо установить height для этого элемента, потому что IE имеет проблемы с настройкой высоты в этом сценарии (даже если вы определили min-height).Если вы дадите своему телу height: 100vh, это должно исправить это.

Если вы не хотите, чтобы нижний колонтитул всегда был виден снизу, вы захотите обернуть всеваши элементы в div и установите текущие body flex стили на это.Таким образом, вы сможете использовать min-height на body и все же добавить определенный height: 100% в свой раздел оболочки приложения.

Посетите этот сайт для получения более подробной информации обо всех ошибках flex: https://github.com/philipwalton/flexbugs#flexbug-3

Вот пример фрагмента в самой простой форме.Как правило, я не помещал гибкие макеты непосредственно в элементы HTML или body.Не уверен, если это вызывает проблемы или нет.Самым большим отличием от вашей структуры является то, что я использую .app, чтобы обернуть все, включая нижний колонтитул, чтобы я мог применить к нему гибкий стиль, и использую .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>